Javascript 多文件输入html不工作

对于多文件输入，我有以下代码

<form action="" enctype = "multipart/form-data" method="post" name="login">

<input type = "file" name = "photo[]" id = "files" multiple onchange =  "handleFileSelect(this.files)"/><br/>
<div id="selectedFiles"></div>
<input type="submit" value="Sign In">
</form>

javascript等效函数为

selDiv = document.querySelector("#selectedFiles");
function handleFileSelect(e) {
    if(!this.files) return;

    selDiv.innerHTML = "";

    var files = e;
    for(var i=0; i<files.length; i++) {
        var f = files[i];
        selDiv.innerHTML += f.name + "<br/>";

    }

}

selDiv=document.querySelector（“selectedFiles”）；
功能手柄文件选择（e）{
如果（！this.files）返回；
selDiv.innerHTML=“”；
var文件=e；
对于（var i=0；i实际上，这就是使用
multiple
属性输入的HTML文件的工作方式。用户必须使用shift或control单击一次选择要上载的所有文件

要让站点用户多次使用HTML文件输入元素并保留以前的所有选择，您需要将每次使用文件元素时收到的file base64数据写入隐藏的表单元素

<form action="process.php" method="post" name="uploadform" enctype="multipart/form-data">
  // other form elements if needed
  <input type="submit">
</form>

<!-- outside the form, you don't want to upload this one -->
<input type="file" id="upfiles" name="upfiles">

<script>

  document.getElementById('upfiles').addEventListener('change', handle_files, false);

  function handle_files(evt) {

    var ff = document.forms['uploadform'];
    var files  = evt.target.files;

    for ( var i = 0, file; file = files[i]; i++ ) {

      var reader = new FileReader();

      reader.onload = (function(file) {
        return function (ufile) {
          var upp = document.createElement('input');
          upp['type'] = 'hidden';
          upp['name'] = +new Date + '_upfile_' + file.name.replace(/(\[|\]|&|~|!|\(|\)|#|\|\/)/ig, '');
          upp.value = ufile.target.result;
          ff.appendChild(upp);
        }
      }(file));

      reader.readAsDataURL(file);
    }
  }
</script>


//其他表单元素（如需要）
document.getElementById（'upfiles'）。addEventListener（'change'，handle_files，false）；
函数句柄_文件（evt）{
var ff=document.forms['uploadform']；
var files=evt.target.files；
for（var i=0，file；file=files[i]；i++）{
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（ufile）{
var upp=document.createElement（'input'）；
upp['type']='hidden'；
upp['name']=+新日期+'\u upfile.'+file.name.replace（/（\[\\]&~！\（\\）\\\\/）/ig，）；
upp.value=ufile.target.result；
ff.儿童（upp）；
}
}(档案);；
reader.readAsDataURL（文件）；
}
}

接下来，您需要编写一个脚本在服务器上运行，以处理隐藏的base64字段。如果使用PHP，您可以：

<?php

$path = 'path/to/file/directory/';
// this is either:
//    - the absolute path, which is from server root
//      to the files directory, or
//    - the relative path, which is from the directory 
//      the PHP script is in to the files directory

foreach ( $_POST as $key => $value ) { // loop over posted form vars
  if ( strpos($key, '_upfile_') ) {    // find the file upload vars
    $value = str_replace(' ', '+', $value); // url encode
    file_put_contents($path.$key, base64_decode($value));
    // convert data to file in files directory with upload name ($key)
  }
}

?>

我遇到了同样的问题。感谢您的提问和回答。我通过添加到DOM输入类型文件并将单击委托给分离的元素，成功地添加了几个文件：

<form method="POST" enctype="multipart/form-data" action="/echo/html">
  <button class="add">
    Add File
  </button>
  <ul class="list">
  </ul>
  <button>
      Send Form
  </button>
</form>


添加文件


发送表格

使用javascript：

$('form button.add').click(function(e) {
    e.preventDefault();
    var nb_attachments = $('form input').length;
    var $input = $('<input type="file" name=attachment-' + nb_attachments + '>');
    $input.on('change', function(evt) {
        var f = evt.target.files[0];
        $('form').append($(this));
        $('ul.list').append('<li class="item">'+f.name+'('+f.size+')</li>');
    });
    $input.hide();
    $input.trigger('click');
});

$（'form button.add'）。单击（函数（e）{
e、 预防默认值（）；
var nb_attachments=$（'form input'）。长度；
变量$input=$（''）；
$input.on（'change'，函数（evt）{
var f=evt.target.files[0]；
$（'form'）。追加（$（this））；
$（'ul.list'）。追加（'
'+f.name+'（'+f.size+'）
）；
});
$input.hide（）；
$input.trigger（'click'）；
});

它与Edge、Chrome 50和firefox 45配合使用，但我不知道与旧版本或其他浏览器的兼容性

请参阅。
实际上它就是这样工作的。当使用具有属性
multiple
的HTML file元素时，用户必须使用shift或control单击一次选择要上载的所有文件。如果选择一个，则关闭对话框，然后返回并选择另一个，它将替换以前选择的文件.Ahh谢谢你提供的信息。但是用户没有办法多次上传文件吗。