HTML5文件API – 将文件发送到服务器进行处理

我有以下表格的表格：

 ...  Add ...   

然后将add元素的click事件连接起来，如下所示：

 var images = []; $("#add").click(function() { var files = $("#images")[0].files; for (var i = 0; i < files.length; i++) { images.push[files[i]; } $("#images").val(""); }); 

这允许我从多个位置添加图像。 现在我需要将文件发送回服务器。 我发现了以下问题：

从HTML5传递路径到上传文件拖放到输入字段

这似乎是相似的。 因此，我在提交表单时使用以下内容来连接事件：

 var form = $("form"); form.submit(function() { for (var i = 0; i < images.length; i++) { var reader = new FileReader(); reader.onload = function(e) { $("").attr({ type: "hidden", name: "images[]" }).val(e.target.result).appendTo(form); }; reader.readAsDataURL(images[i]); } }); 

最后在服务器上我有以下代码：

 print_r($_POST); print_r($_FILES); 

但是，两个集合都不包含提交图像的项目。 我想知道我做错了什么？ 谢谢

Answer 1

好吧，我认为你的问题是由FileReader的load事件处理程序引起的，它将这些数据URL附加到表单，在表单提交给服务器后调用。

您可以解决此问题，并通过将这些项添加到Add链接的click处理程序中的表单来取消多余的images变量并submit事件处理程序。 您还可以利用此机会进行一些客户端validation，防止重复数据URL上传到服务器，甚至为所选图像添加预览/删除选项。

此外，您可以通过将附加到file输入的change处理程序替换其click处理程序来取消添加链接。

编辑（nfplee）：

 var images = []; $("#add").click(function() { var files = $("#images")[0].files; for (var i = 0; i < files.length; i++) { var reader = new FileReader(); reader.onload = (function(file) { return function(e) { images.push({ name: file.name, file: e.target.result }); }; })(files[i]); reader.readAsDataURL(files[i]); } $("#images").val(""); }); var form = $("form"); form.submit(function() { for (var i = 0; i < images.length; i++) { $("").attr({ type: "hidden", name: "images[" + i + "][name]" }).val(images[i].name).appendTo(form); $("").attr({ type: "hidden", name: "images[" + i + "][file]" }).val(images[i].file).appendTo(form); } });