readAsDataURL - это не блоб, но изображения показывают

Question

У меня есть файл ввода, который после предварительного просмотра изображений после добавления.Изображения показывают, но я получаю: 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>

Answer 1

Хороший пример нескольких проблем вместе.

1. Исключение, которое вы получаете - это потому, что файлы не являются реальным массивом, поэтому for ... in - перебирает ключи "0", "1" ... "item", "length".
2. Вы не можете использовать асинхронную функцию внутри цикла без выделения области действия
3. Мое личное мнение: не используйте 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>

Answer 2

Я бы выбрал FileReader для 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/*"

Answer 3

Вы неправильно используете цикл for( in ).Поскольку это повторяется, это душит свойство длины - которое не является Объектом Blob.Это происходит потому, что for( in ) перебирает все (перечисляемые) свойства объекта, а не только «собственные свойства». Ссылка

У вас есть два варианта:

• Придерживайтесь традиционной (и всегда работает) for() петля
• Используйте for( of ) loop

Цикл 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>