6

我为我做了一个简单的文件字段：

<input type="file" name="pictures_array[]" multiple accept="image/*" id="page_pictures_array" />

和一些 HTML5 File API 代码来列出文件：

$('.page-form #page_pictures_array').change(function(evt) {
      var file, files, reader, _i, _len;
      files = evt.target.files;
      console.log(files);
      $('#file-list').empty();
      for (_i = 0, _len = files.length; _i < _len; _i++) {
        file = files[_i];
        reader = new window.FileReader;
        reader.onload = (function(file) {
          return function(e) {
            var src;
            src = e.target.result;
            return $("<li>" + file.name + " - " + file.size + " bytes</li>").prepend($('<img/>', {
              src: src,
              "class": 'thumb'
            })).appendTo($('#file-list'));
          };
        })(file);
        reader.readAsDataURL(file);
      }
    });

（参见此处）

但是，由于我希望我的用户确实非常愚蠢，我相信他们会选择一个文件，然后再次单击上传字段以选择下一个。但是，<input type="file">每次使用新选择的图像都会重置列表。

如何确保将新文件附加到<input>'s 数组中，以免被愤怒的用户评论淹没？

4

1 回答 1

8

我也在寻找这个问题的答案，我认为其他人已经这样做了。但是，如果您查看文件列表 W3 参考http://www.w3.org/TR/FileAPI/#dfn-filelist它说它是只读的......

编辑：现在这是一个很大的代码，有一些改进，使得复制/粘贴变得困难。但我开始创建一个变量来保存所有 tmp 文件。

var tmp_files = new Array();

然后当我添加一个新文件时，我将文件推送到该数组，如下所示

tmp_files.push(file);

在所有插入/删除之后（我有另一个 var 来保存删除），当用户单击以发送文件时，我有这段代码可以使用我想要的文件制作表单数据

var data = new FormData(); var count = 0;
$.each(tmp_files, function(i, file){
    if(del_files.indexOf(file.name)== -1){
        data.append(count, file);
        count++;
    }
});

然后我只是通过 ajax 发送 var 数据并保存它们。您可以使用 $data = $_FILES;

希望这对您有所帮助。

于 2014-01-28T12:42:54.127 回答