多文件输入 html 不工作

Question

我有以下用于多文件输入的代码

<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/>";

    }

}

我得到的是在上传第二个文件时。 FileList 被覆盖，而不是有 2 个文件，第二个文件存在于 FileList 中。这里FileList是通过this.files.

传递的

同样，在传递到服务器时，只传递了第二张图像。我已经彻底搜索但找不到答案。如果有人能提供帮助，我将不胜感激。

Answer 1

...multiple file input ... The FileList gets overwritten...

实际上 HTML file input with the multiple attribute works—the user must select all the files they want to upload at once, using shift or control click. If the user operates the same file input upload process a second time anything selected prior is discarded and only the most recent selections remain in the FileList.

就是这样

But isn't there any way for the user upload file multiple times.

为了让您的网站用户多次使用 HTML 文件输入元素并保留所有先前的选择，您需要将每次文件收到的文件（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>

接下来需要在服务器上写一个脚本到运行来处理隐藏的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)
  }
}

?>

Answer 2

我运行陷入同样的问题。感谢您的提问和回答。我设法通过添加到 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');
});

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

参见this fiddle。

多文件输入 html 不工作

multiple file input html not working

javascript

html

forms

input

filelist