Question

我正在尝试使用此javascript代码读取input[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;

任何人都知道什么是正确的价值？

Answer 1

FileReader是异步的，执行发生在一个单一的线程中。

这意味着调用此行时（我看不到str在任何地方被定义，如果没有，请记住在添加之前将其设置为初始字符串，即var str = "";）：< / p>

str = str + "\u0026" + $(this).attr("name") + "=" + blob;

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参数的一部分，则可能需要首先对其进行编码（请参阅示例encodeURIComponent - 将图像作为数据 - uri您也可能遇到长度限制并且必须使用POST）。

如果你需要一个实际的blob，你甚至不需要使用FileReader - 只需使用同样是blob的文件对象（来自this.files[n]）。

Answer 2

如果您提供的信息有限，如果您尝试在div或img元素中显示图像，则下面显示了两种方法。

解决方案1

$('input').change(function() {

  var fr = new FileReader;

  fr.onloadend = function() {
    $("#target").attr('src', fr.result);
  };
  console.log(this.files[0]);
  //fr.readAsDataURL(this.files[0]);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file">
<img id="target">

解决方案2

$('input').change(function() {

  var fr = new FileReader;

  fr.onload = function() {
    var img = new Image;
    img.onload = function() {
      var c = document.getElementById("cvs");
      var ctx = c.getContext("2d");
      ctx.drawImage(img, 0, 0, 200, 180);
    }
    img.src = fr.result;

  };
  console.log(this.files[0]);
  fr.readAsDataURL(this.files[0]);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file">
<canvas id="cvs"></canvas>

这些会读取您的文件，您可以动态获取文件名和其他属性。

Answer 3

所以，我终于设法用这种方法来解决这个问题：

  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类处理;这就是我现在正努力做的事情。

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

3 个答案:

解决方案1

解决方案2

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

3 个答案:

解决方案1 ​​

解决方案2

解决方案1