TypeError：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型

Posted 2023-03-22

【中文标题】TypeError：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型

【英文标题】：TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

【发布时间】：2021-12-04 10:19:38

【问题描述】：

我已经为此苦苦挣扎了几天。我不知道为什么它一直说我的文件不是一种 blob。有什么帮助吗？

下面是 html

<form style="padding-top:10px;" method="post" action="upload.php" enctype="multipart/form-data">
                                    <input style="padding-bottom: 20px;" type="file" id="file" name="file" onchange="fileValidation(this);">
                                    <div id="responsefromfileupload" value=""></div>
                                </form>

以下是 javascript

function fileValidation(reader) 

var file = $("input[type=file]").get(0).files[0];
var fileInput = document.getElementById('file');
var filePath = fileInput.value;

// Allowing file type
var allowedExtensions =
    /(\.jpg|\.jpeg|\.png|\.gif)$/i;


if (!allowedExtensions.exec(filePath)) 

$("#responsefromfileupload").replaceWith(`<div style="width: 50%;" class="alert alert-danger" role="alert">
                                                    This image file type is not accepted!</div>`);
    


if (allowedExtensions.exec(filePath)) 

    var reader = new FileReader();

    reader.onload = function () 
        $("#previewImg").attr("src", reader.result);
        $("#previewImg").attr("margin-left", "25%");
    

  
  reader.readAsDataURL(file);

【问题讨论】：

尝试将 fileValidation(this) 替换为 fileValidation(event)。在 fileValidation 中将 reader 重命名为 event 并检查 readAsDataURL 中的 event.target.files[0]。如果您创建一个可运行的示例，可能更容易获得帮助

@DraganS 我是新手，如何制作可运行的示例？

请检查我的帖子 - 稍微更改了您的原始代码。

【参考方案1】：

function fileValidation(event) 

var file = event.target.files[0];
var fileInput = document.getElementById('file');
var filePath = fileInput.value;

// Allowing file type
var allowedExtensions =
/(\.jpg|\.jpeg|\.png|\.gif)$/i;


if (!allowedExtensions.exec(filePath)) 

$("#responsefromfileupload").replaceWith(`<div style="width: 50%;" class="alert alert-danger" role="alert">
                                                This image file type is not accepted!</div>`);



if (allowedExtensions.exec(filePath)) 

var reader = new FileReader();

reader.onload = function () 
    $("#previewImg").attr("src", reader.result);
    $("#previewImg").attr("margin-left", "25%");


  
  reader.readAsDataURL(file);

<form style="padding-top:10px;" method="post" action="upload.php" enctype="multipart/form-data">
                                <input style="padding-bottom: 20px;" type="file" id="file" name="file" onchange="fileValidation(event);">
                                <div id="responsefromfileupload" value=""></div>
                            </form>

你可以使用的模板——去掉

【讨论】：

非常感谢，您的 var 文件变量实际上已修复它。你知道为什么只有在我选择了两次图像后才会显示警报 (#responsefromfileupload) 吗？

尝试选择不同的文件 :) 猜测第二次不会触发 onchange

我有点困惑（对不起，对这个世界很陌生）我怎样才能第一次让 onchange 着火？或者你知道为什么 onclick 会做同样的事情吗？

检查 。有一个 onchange 属性。选择文件后，将执行分配的处理程序。如果您第二次选择相同的文件（据我所知），“什么都没有”改变。比如，你可以在每次处理 onchange 后重新设置它的值，然后每次都会执行 onchange 处理程序。

但它甚至不会在我第一次选择文件时触发，它只会在我第二次选择文件时触发。