Question

我正在尝试显示多个已上传的文件，但是预览的控制台日志为空白。我在这里想念什么？

function readURL(input) {
            var preview = '';
            if (input.files && input.files[0]) {
                $(input.files).each(function (index) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        preview += '<div class="image">';
                        preview += '<img src="' + e.target.result + '">';
                        preview += '</div>';
                    }
                    reader.readAsDataURL(input.files[index]);
                });
                console.log(preview);
                $('.preview').html(preview);
            }
        }

        $("#logos").change(function () {
            readURL(this);
        });

Answer 1

当您将preview的值登录到控制台时，其值仍为''。这是因为FileReader“ load”操作是异步的，因此为什么必须为其附加一个onload处理程序。尝试将console.log函数的onload 放入。

        if (input.files && input.files[0]) {
            $(input.files).each(function (index) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    preview += '<div class="image">';
                    preview += '<img src="' + e.target.result + '">';
                    preview += '</div>';
                    console.log(preview);
                    $('.preview').html(preview);
                }
                reader.readAsDataURL(input.files[index]);
            });
        }

换句话说，onload函数只有在您执行reader.readAsDataURL(input.files[index])后的一段任意时间后才会触发。

Answer 2

代替使用异步FileReader，您可以使用同步URL.createObjectURL，这样会更好

function readURL(input) {
  var preview = '';
  var URL = window.URL || window.webkitURL

  if (input.files && input.files[0]) {
    $(input.files).each(function (index, file) {
      preview += '<div class="image">';
      preview += '<img src="' + URL.createObjectURL(file) + '">';
      preview += '</div>';
    });
    console.log(preview);
    $('.preview').html(preview);
  }
}

$("#logos").change(function () {
  readURL(this);
});

JS从上传中获取多个文件

2 个答案: