我有以下形式的表格:

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


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

最佳答案

好的,我认为您的问题是由FileReaderload事件处理程序引起的,该事件处理程序将这些数据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/

10-09 15:02
查看更多