jquery - 用户连续选择多个文件

Question

我正在编写一个电子邮件发送表单，用户应该能够在其中附加文件。我希望用户能够连续选择多个文件(即选择多个文件，但不一定一次全部选择)，并且整个文件集都可在 $_FILES 集合中供服务器使用。

这似乎归结为，如何从诸如

之类的字段传输用户选择

<input type="file" id="userfile" name="userfile[]" multiple="multiple" />

进入表单中的另一个位置——大概使用Jquery——然后清除输入以便可以将其重新用于另一个用户文件输入？

或者有更好的方法来实现这一目标吗？

Answer 1

如果你想保存路径，请检查我的代码

这里我将图像源的输入文件路径也插入到输入隐藏数组

$("#userfile").change(function(e){

var allimages = e.target.files;

var result = Object.keys(allimages).map(function(key) {
  return [allimages[key]];
});

result.forEach(function(element){

    var image = URL.createObjectURL(element[0]);
    var oImg = document.createElement("img");

    oImg.setAttribute('src', image);
    oImg.setAttribute('width', "100px");

    $('.images').append(oImg);
    
    var files = $("#files").val();
    
    if(!files) {
      image = JSON.stringify(image);     
    } else {
     files = JSON.parse(files);
     var fileval = files instanceof Array ? files : [files];
     
      fileval.push(image);
      image = JSON.stringify(fileval);
    }
    
     $("#files").val(image);
   });
     
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="file" id="userfile" name="userfile[]" multiple="multiple" />
<input type="hidden" id="files" type="files[]" value="" />
<div class="images"></div>