我有以下形式的表格:
<form>
...
<input type="file" multiple="multiple" id="images" />
<a id="add">Add</a>
...
<input type="submit" value="Submit" />
</form>
然后将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("");
});
这使我可以从多个位置添加图像。现在,我需要将文件发送回服务器。我发现以下问题:
Passing path to uploaded file from HTML5 drag & drop to input field
这似乎是相似的。因此,在提交表单时,我使用以下内容来关联一个事件:
var form = $("form");
form.submit(function() {
for (var i = 0; i < images.length; i++) {
var reader = new FileReader();
reader.onload = function(e) {
$("<input>").attr({ type: "hidden", name: "images[]" }).val(e.target.result).appendTo(form);
};
reader.readAsDataURL(images[i]);
}
});
最后在服务器上,我有以下代码:
print_r($_POST);
print_r($_FILES);
但是,两个集合都不包含提交的图像的项目。我想知道我在做什么错?谢谢
最佳答案
好的,我认为您的问题是由FileReader
的load
事件处理程序引起的,该事件处理程序将这些数据URL附加到表单中,在将表单提交到服务器后被调用。
您可以解决此问题,并通过将这些项目添加到添加链接的images
处理程序中的表单中,从而消除多余的submit
变量和click
事件处理程序。您还可以利用此机会进行一些客户端验证,以防止将重复的数据URL上载到服务器,甚至可以为所选图像添加预览/删除选项。
此外,您可以通过将click
处理程序替换为change
输入上附加的file
处理程序来取消添加链接。
编辑(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++) {
$("<input>").attr({ type: "hidden",
name: "images[" + i + "][name]" }).val(images[i].name).appendTo(form);
$("<input>").attr({ type: "hidden",
name: "images[" + i + "][file]" }).val(images[i].file).appendTo(form);
}
});
关于javascript - HTML5文件API-将文件发送到服务器进行处理,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28414937/