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

Question

我有以下表格：

<form>
    ...
    <input type="file" multiple="multiple" id="images" />
    <a id="add">Add</a>
    ...
    <input type="submit" value="Submit" />
</form>

添加元素的点击事件然后像这样连接起来：

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);

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

Answer 1

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

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

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

编辑（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);
    }
});