文件字段-附加文件列表 [英] File field - Append file list

问题描述

我为我提供了一个简单的文件字段:

I have made me a simple file field:

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

和一些HTML5 File API代码以列出文件:

and some HTML5 File API code to list the files:

$('.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"> 的列表.

However, since I expect my users to be very stupid indeed, I am sure they will choose one file, then click on the upload field another time to choose the next. However, the list of the <input type="file"> is reset each time with the newly chosen images.

如何确保将新文件追加到< input> 的数组中，以免出现用户生气的情况?

How can I make sure the new files are appended to the <input>'s array so I don't get flooded with angry user comments?

推荐答案

我也在寻找答案，我想其他人已经做到了.但是，如果您查看文件列表W3参考 http://www.w3.org/TR/FileAPI/#dfn-filelist 它表示其只读....

I'm also looking for an answer to this, I think others already do that. But if you look at the filelist W3 reference http://www.w3.org/TR/FileAPI/#dfn-filelist it says that its readonly....

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

Edit: It's a big code now, with some improvements, that make the copy/paste difficult. But I started to create one variable that saves all the tmp files.

var tmp_files = new Array();

然后，当我添加一个新文件时，我将文件像这样推入该数组

Then when I add a new file I push the file to that array like this

tmp_files.push(file);

在所有插入/删除操作之后(我有另一个变量来保存删除内容)，当用户单击发送文件时，我得到了这段代码，该代码使formdata与我想要的文件

After all the insertions/removals (I have another var to save the deletions) when the user clicks to send the files I have this code that makes the formdata with the files I want

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;

Then I just send the var data thru ajax and save them. You can get them using $data = $_FILES;

希望这对您有所帮助.

这篇关于文件字段-附加文件列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！