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>

用户连续选择多个文件

1 个答案: