Javascript 无法使用FileReader读取图像（请参阅更新2）

我正在尝试使用以下javascript代码读取由

输入[type=file]

字段选择的图像文件：

      var reader = new FileReader();
      var blob;
      reader.onloadend = function (e) {
        blob = e.target.result;
      }
      reader.readAsDataURL(this.files[0]);

但是，当我在浏览器中运行代码时，会出现以下错误：

TypeError: Argument 1 of FileReader.readAsDataURL is not an object.

有人能看出这里出了什么问题吗

更新

这是包含此代码段的代码。如果要了解导致错误的原因，我希望：

  $('#submit').on('click', function(){
    var $form = $( 'form.form' ), url = $form.attr( "action" ), str = $form.serialize();
    $('input[type=file]').each(function(){
      var reader = new FileReader();
      var blob;
      reader.onloadend = function (e) {
        blob = e.target.result;
      }
      reader.readAsDataURL(this.files[0]);
      str = str + "\u0026" + $(this).attr("name") + "=" + blob;
    });
    var posting = $.post( url, str );
    posting.done(function(data){
      if(data == "") {
        $("#alerta_sucesso").css("display", "block");
      } else {
        $("#alerta_erro").find("#texto").text(data);
        $("#alerta_erro").css("display", "block");
      }
    });
  });

更新2

我设法更改代码并执行它，没有错误，但即使如此，我也无法将图像存储在变量

blob

中，以将此数据发送到服务器。当前代码如下所示：

  $('#submit').on('click', function(){
    var $form = $( 'form.form' ), url = $form.attr( "action" ), str = $form.serialize();
    var input = $form.find('input[type=file]');
    $form.find('input[type=file]').each(function(){
      var id = $(this).attr("id");
      if(typeof id !== "undefined") {
        if(this.files.length > 0) {
          var reader = new FileReader();
          var blob;
          reader.onloadend = function (e) {
            blob = e.result;
          }
          reader.readAsDataURL(this.files[0]);
          str = str + "\u0026" + $(this).attr("name") + "=" + blob;
        }
      }
    });
    var posting = $.post( url, str );
    posting.done(function(data){
      if(data == "") {
        $("#alerta_sucesso").css("display", "block");
      } else {
        $("#alerta_erro").find("#texto").text(data);
        $("#alerta_erro").css("display", "block");
      }
    });
  });

我想现在问题出在线路上：

blob = e.result;

---

有人知道什么是正确的值吗？

在给出的信息有限的情况下，如果您试图在div或img元素中显示图像，下面显示两种方法

解决方案1

$（'input'）。更改（函数（）{
var fr=新文件读取器；
fr.onloadend=函数（）{
$（“#目标”）.attr（'src'，fr.result）；
};
console.log（this.files[0]）；
//fr.readAsDataURL（this.files[0]）；
});
FileReader是异步的，在单个线程中执行

这意味着当调用此行时（我看不到任何地方定义了
str
，如果没有，请记住在追加它之前将其设置为初始字符串，即
var str=“”；
）：

blob
尚未填充任何值，因为它需要等待整个功能块完成执行，以便可以执行处理程序中的代码

您需要从回调中生成结果字符串：

var reader = new FileReader();
reader.onloadend = function() {
  str += "&" + $(this).attr("name") + "=" + this.result;
  // continue from here ...
};
reader.readAsDataURL(this.files[0]);

但是
blob
不是此代码中的blob（或者
this.result
在我进行上述更改之后），它是一个此时保存数据uri的字符串。如果要将字符串作为URI参数的一部分，则可能需要首先对其进行编码（例如，请参阅-使用图像作为数据URI，您可能也会遇到长度限制，并且必须使用POST）

如果您需要一个实际的blob，您甚至不需要使用FileReader—只需使用文件对象，它也是blob（来自
this.files[n]
）。
因此，我终于用这种方法解决了这个问题：

  var str = "";

  $('input[type=file]').on("change", function(){
    var id = $(this).attr("id");
    var name = $(this).attr("name");
    if(typeof id !== "undefined") {
      if(this.files.length > 0) {
        reader = new FileReader();
        reader.onloadend = function () {
          str += "&" + name + "=" + this.result;
        }
        reader.readAsDataURL(this.files[0]);
      }
    }
  });

  $('#submit').on('click', function(){
    var $form = $( 'form.form' );
    var url = $form.attr( "action" );
    str += $form.serialize();
    $.post(url, str, function(data){
      if(data == "") {
        $("#alerta_sucesso").css("display", "block");
      } else {
        $("#alerta_erro").find("#texto").text(data);
        $("#alerta_erro").css("display", "block");
      }
    });
  });

现在图像以字符串形式发送到服务器，PropertyEditorSupport类可以处理该字符串；这正是我现在正在努力解决的问题。
你能创建一个stacksnippets来演示吗？@guest271314我用我之前发布的代码片段所在的完整代码更新了这个问题。我希望这可以提供一个更广泛的上下文来说明导致错误的原因。@guest271314我想要完成的事情：提交
input
字段选择的图像和其余的文本字段（现在，这不会发生，因为函数$.serialize没有读取这个
input[type=file]
files）.
onloadend
提供
FileReader.readAsDataURL（）
异步调用的
.result
。为什么发送查询字符串而不使用
FormData（）
？
文档中是否有多个
元素？您能在问题中包含
html
吗？答案不能解释OP中描述的错误。问题中的
javascript
应返回预期结果。看不出他的代码有什么问题。由于他提出了一个广泛的问题，我给出了两种解决方案。你们能重现问题中描述的错误吗？操作时的
javascript
有什么问题？我试图重现它，但我离原始错误还差得远。我只得到的是
TypeError:未能在“FileReader”上执行“readAsDataURL”：参数1不是“Blob”类型。
他的代码中必须有其他内容，否则他应该发布错误的堆栈跟踪。@Inuka我用我之前发布的代码片段所在的完整代码更新问题。我希望这可以提供一个更广泛的背景，说明是什么导致了错误。有些要点：1）
str
定义在代码的开头，确切地说是第二行。2） 我移动
str+=”&“+$（this.attr（“name”）+“=”+this.result按sugested显示在块内，但字符串仅附加在此块内。我只是在
reader.onloadend=function（）{…}
块内和
var posting=$.post（url，str）之前可视化
str
。首先显示最后一个；之后的第一个。但当我检查浏览器的开发人员工具时，该参数不包括在其他参数中。@KleberMota“但字符串只出现在该块中”这是预期的，也是应该的。这是一个异步操作，只有在整个加载完成后才能（安全地）追加结果。正如我所指出的，您需要从处理程序块内继续（即，发布结果等）。
  var str = "";

  $('input[type=file]').on("change", function(){
    var id = $(this).attr("id");
    var name = $(this).attr("name");
    if(typeof id !== "undefined") {
      if(this.files.length > 0) {
        reader = new FileReader();
        reader.onloadend = function () {
          str += "&" + name + "=" + this.result;
        }
        reader.readAsDataURL(this.files[0]);
      }
    }
  });

  $('#submit').on('click', function(){
    var $form = $( 'form.form' );
    var url = $form.attr( "action" );
    str += $form.serialize();
    $.post(url, str, function(data){
      if(data == "") {
        $("#alerta_sucesso").css("display", "block");
      } else {
        $("#alerta_erro").find("#texto").text(data);
        $("#alerta_erro").css("display", "block");
      }
    });
  });