Javascript处理多个文件上传

Question

我正在做一个项目，步骤如下：

1. 使用上传多张图片创建表单
2. 上传前预览、删除队列中的图像
3. 在提交前处理文件输入值

这是我的代码

     var fileList = [];


            function toObject(arr) {
                var rv = {};
                for (var i = 0; i < arr.length; ++i)
                    rv[i] = arr[i];
                return rv;
            }
            //Image prev
            // Multiple images preview in browser
            var imagesPreview = function (input, imageContainer) {

                if (input.files) {
                    var filesAmount = input.files.length;
                    $(imageContainer).html('');
                    for (i = 0; i < filesAmount; i++) {
                        var reader = new FileReader();

                        reader.onload = function (event) {
                            var html = '<div class="image-item col-sm-6 col-md-4 col-lg-3"><div class="image-wrapper">' +
                                ' <img src="'
                                + event.target.result + '"/></div></div>';
                            $(html).appendTo(imageContainer);

                        }
                        var files = input.files;
                        fileList.push(files[i]);
                        reader.readAsDataURL(input.files[i]);
                    }
                    input.files = toObject(fileList);
                }

            };

            $('#input-image').on('change', function () {
                imagesPreview(this, '.image-container');
            });

                 <div class="image-item">
                 
                 <!-- input the image from user -->
                 <input id="input-image" type="file" name="photos[]" multiple>
                    <hr>
                    <div class="image-container row">
                    <!-- Previewing the image thumbnail -->
                    </div>
                    
                    </div>

我的问题：我可以用fileList 变量设置input-image 的值吗，因为我设置了它但发生了错误

Answer 1

sry，有点累，不会深入，也不会解决坑的事情…… 只有一种方法可以更改文件输入的值，那就是使用另一个 FileList 实例。获得它们的唯一方法是使用一些新的 api，因此它不适用于所有浏览器。我做了一个函数来帮助你。

var fileList = [];

// only way to change input[type=file] value is with a other FileList instance
// and this is the only way to construct a new FileList
function createFileList(a) {
  a = [].slice.call(Array.isArray(a) ? a : arguments)
  for (var c, b = c = a.length, d = !0; b-- && d;) d = a[b] instanceof File
  if (!d) throw new TypeError('expected argument to FileList is File or array of File objects')
  for (b = (new ClipboardEvent('')).clipboardData || new DataTransfer; c--;) b.items.add(a[c])
  return b.files
}

// This is what you got to do later when they remove a image 
//
// this will trigger a change event so you maybe want to temporary
// turn off the change event listener
// 
// input.files = createFileList(fileList)

// Image prev
// Multiple images preview in browser
function imagesPreview(input, imageContainer) {
  $(imageContainer).empty();
  var URL = window.URL || window.webkitURL;
  var $html = $(
    '<div class="image-item col-sm-6 col-md-4 col-lg-3">'+
    '<div class="image-wrapper"> <img></div></div>'
  );

  $.each(input.files, function(i, file) {
    var $clone = $html.clone()
    // could be a good idea to revoke url also
    $clone.find('img').attr('src', URL.createObjectURL(file))
    $clone.appendTo(imageContainer);
    fileList.push(file);
  });
}

$('#input-image').on('change', function () {
  imagesPreview(this, '.image-container');
});

另一种解决方案是将每个文件附加到表单数据中并使用 ajax 发送表单