代码之家 › 专栏 › 技术社区 › Jam3sn

readAsDataURL不是blob,但图像显示

blob file javascript

Jam3sn · 技术社区 · 7 年前

我有一个文件输入,然后在添加后预览图像。图像显示,但我得到: Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."

是什么原因造成的,它们肯定不会静止不动?

$('#image-upload-input').on('change', function() {
    var files = document.getElementById('image-upload-input').files;

    for (var key in files) {
        if (files[key]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('.image-upload-container').append('<img src="'+ e.target.result +'" style="width: 100px;">');
            }

            reader.readAsDataURL(files[key]);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="image-upload-input" type="file" multiple>

<div class="image-upload-container"></div>

3 回复 | 直到 7 年前

Randy Casburn 7 年前

你误用了 for( in ) 环当它迭代时,它会阻塞length属性—它不是Blob对象。这是因为 for(英寸) 迭代所有(可枚举)对象属性,而不仅仅是“自己的属性”。 Reference

您有两个选择:

坚持传统(并始终有效) for() 环
使用 for( of ) 环

这个 for(of) 循环将只迭代“自己的属性”,而传统的 for() 当长度属性可用时,循环将始终有效。

$('#image-upload-input').on('change', function() {
    var files = document.getElementById('image-upload-input').files;

    for(file of files) {
        if (file) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('.image-upload-container').append('<img src="'+ e.target.result +'" style="width: 100px;">');
            }

            reader.readAsDataURL(file);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="image-upload-input" type="file" multiple>

<div class="image-upload-container"></div>

Oleg Imanilov 7 年前

几个问题结合在一起的好例子。

得到的异常是,因为文件不是真正的数组,所以 for ... in -迭代“0”、“1”。。。“项目”、“长度”键。
如果不隔离作用域,就不能在循环内使用异步函数
我个人的意见是:如果可以,请不要使用jQuery:-)

$('#image-upload-input').on('change', function() {
    var files = document.getElementById('image-upload-input').files;

    for (var key=0; key < files.length; key++) {
        (function(){
            var reader = new FileReader();
            var file = files[key];
            reader.onload = function(e) {
                var img = document.createElement('img');
                img.style= "width:100px";
                img.src = reader.result;
                $('.image-upload-container').append($(img));
            }
            reader. readAsDataURL(file);
        })();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="image-upload-input" type="file" multiple>

<div class="image-upload-container"></div>

Endless TheZver 7 年前

我会抛弃文件阅读器 URL.createObjectURL 使用常规的for循环

$('#image-upload-input').on('change', function() {
  var files = document.getElementById('image-upload-input').files;

  for (var i = 0; i < files.length; i++) {
    var url = URL.createObjectURL(files[i]);
    $('.image-upload-container').append('<img src='+ url +' style="width: 100px;">');
  }
});

并可能将此额外属性添加到输入中

accept="image/*"