Question

我正在构建一个简单的HTML图像上传器。用户可以使用文件输入选择许多图像，并为每个图像创建预览。

要将图像发送到服务器，我正考虑将input附加到每个图像，以便在提交表单时自动发送它们。元素看起来像这样：

<div>
  <input type="file" class="hidden" name="model[images][]">
  <img src="base 64 image">
</div>

问题在于我当然无法为文件输入设置任意文件，那么在不使用单个输入的情况下从同一表单发送许多文件的最简单的解决方案是什么？

Answer 1

在modern browsers中，您可以使用FormData对象及其append方法：

var input  = document.querySelector('input');
var formdata = new FormData();

var nb = 0;
input.onchange= function(e){
    // since we can't write in a fileList, we have to add an index so our server can access each files
    formdata.append('file_'+nb++, this.files[0], this.files[0].name);
    // we also need to keep track of this index
    formdata.append('file_count', nb);
    }
function sendToServer(){
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'script.php');
    xhr.send(formdata);
}

然后在 script.php

中

$file_count = $_POST['file_count'];
for($i=0; $i<$file_count; $i++){
    // Do whatever with your files
    echo $_FILES['file_'.$i]['name'];
    }

HTML将输入作为文件

1 个答案: