HTML5文件API - 将文件发送到服务器进行处理 [英] HTML5 File API - Send file to server for processing

问题描述

我的表格如下：

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

然后将add元素的click事件连接起来：

The add element's click event is then wired up like so:

var images = [];

$("#add").click(function() {
    var files = $("#images")[0].files;

    for (var i = 0; i < files.length; i++) {
        images.push[files[i];
    }

    $("#images").val("");
});

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

This allows me to add the images from multiple locations. Now I need to send the files back to the server. I found the following question:

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

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

Which seems to be similar. Therefore I used the following to wire up an event when the form is submitted:

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

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

Finally on the server I have the following code:

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

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

However neither collection contains an item for the images submitted. I was wondering what I am doing wrong? Thanks

推荐答案

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

Alright, I think your problem here is being caused by the FileReader's load event handler, which appends those data URLs to the form, being called after the form is submitted to the server.

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

You could solve this problem, and do away with the superfluous images variable and submit event handler by adding these items to the form in the click handler for the Add link. You can also use this opportunity to do a little client side validation, preventing duplicate data URLs from being uploaded to the server, and even to add a preview/remove option for the selected images.

此外，你可以通过用点击处理程序来取消添加链接>更改处理程序附加到文件输入。

Furthermore, you could do away with the Add link by replacing its click handler with a change handler attached to your file input.

编辑（nfplee）：

Edit (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);
    }
});

这篇关于HTML5文件API - 将文件发送到服务器进行处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！