点击提交后使用AJAX一张一张上传多张图片答案

【问题标题】：Upload multiple images one by one using AJAX after click submit点击提交后使用AJAX一张一张上传多张图片
【发布时间】：2014-01-16 15:34:36
【问题描述】：

我正在尝试使用ajax 和FormData Object 上传多张图片。我遇到的问题是脚本只上传了 1 张图片，其他的什么都不做。

此脚本将仅在 chrome 中使用

这里是脚本JS：

(function () {
    var count = 0;

    function showUploadedItem(source,index) {
        var list = $("#image-list");
        list.append("<li><img class='" + count + "' src=''></li>");
        $("." + count + "").attr("src",source);
        count++;
    }

    $('[type="file"]').change(function() {
        var file = this.files;

        $.each(file, function(i, filename) {
            reader = new FileReader();
            reader.onloadend = function (e) {
                showUploadedItem(e.target.result, filename.name);
            };

            reader.readAsDataURL(filename);
        });
    });

$('button').click(function() {      

    var files = $("[type='file']")[0].files;

    $.each(files, function(i, file) {

        var formdata = new FormData();
        formdata.append('images', file.name, file);

        console.log(formdata);

        $.ajax({
            url :"up.php",
            data:formdata,
            type:"POST",
            contentType: false,
            processData: false,
        });
    }); 
});
}());

在 PHP 中我有这个：

<?php 
    move_uploaded_file( $_FILES["images"]["tmp_name"], "img/" . $_FILES['images']['name']);
?>

我修改了一些代码，因为我发现了问题，但是现在当我提交图片时，我遇到了 PHP 限制文件上传的问题，并且表单数据不会一个一个地上传文件。

EDIT2：我找到的解决方案是将每个循环放在 click 事件中以及在每个我放置 ajax 调用中。

【问题讨论】：

记住formdata在IE上工作，我建议你使用隐藏的iframe方法blog.w3villa.com/programming/…
只会在chrome上使用
是一次性提交还是一个一个提交？
一一提交。我发现的独特方法是将 $.each() 放入 button.click 并为输入文件中的每个图像进行 AJAX 调用。我还必须在每次迭代中创建一个新的 FormData()
@pocesar 我已经更新了代码来告诉你我是怎么做的

标签： jquery ajax image forms multipartform-data

【解决方案1】：

FormData 采用单个文件而不是文件列表。在你的代码中file实际上是一个FileList，filename是文件

formdata.append("images[]", filename);

【讨论】：

我试过了，但是当我选择要上传的 30 张图片并单击提交时，PHP 只上传 20 张图片，这是 php.ini 文件中存在的限制。目前，我发现的唯一解决方案是在 click 函数中创建的每个循环中创建一个新的 FormData 对象，但问题是如果我放置 1000 张图像，提交将执行 1000 次 ajax 调用......
@Bultack 你听说过 FTP 或 SSH 吗？
FTP 是的，SSH 的东西，但我从未使用过它。为什么？
@Bultack 通过表单/ajax 上传数百个文件似乎是个糟糕的主意。
是的，但是使用它的用户不能使用 FTP 或 SSH 连接。我尝试将基本脚本作为 blueimp :/