jQuery - 从输入多个循环发布单个文件答案

【问题标题】：jQuery - post single files with loop from input multiplejQuery - 从输入多个循环发布单个文件
【发布时间】：2015-03-19 02:00:54
【问题描述】：

我需要使用多格式表单中的 jQuery 文件进行发布。问题是我不知道如何使用 foreach 循环单独发送每个文件，所以我可以分别从每个文件中获取上传成功。

这是我将每个文件发送到 PHP 的函数：

        var fileInput = document.getElementById ("images_upload_new_album");
        if ('files' in fileInput) {
            //console.log(fileInput.files);
            $.each(fileInput.files, function(index, val) {
                 /* iterate through array or object */
                 console.log(fileInput.files[index]);
                $.ajax({
                    url: config.site + "admin/photos/upload_test",
                    type: 'POST',
                    data: {file: fileInput.files[index].name},
                    dataType: 'json',
                    mimeType:"multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData:false,
                    beforeSend: function (data) {
                        console.log("Before send.");
                        //console.log(data);
                    }, // AJAX request is about to be sent
                    complete: function (data) {
                        console.log("Complete.");
                        //console.log(data);
                    }, // AJAX request has completed
                    success: function(data, textStatus, jqXHR) // AJAX request has completed successfully
                    {
                        console.log("success.");
                        console.log(data);
                    },
                    error: function(jqXHR, textStatus, errorThrown) // AJAX request has completed with errors
                    {
                        console.log("error.");
                    }
                });
            });
        };

还有我的 PHP 测试函数。

public function upload_test()
{
    $received = $_FILES;
    echo json_encode($received);
}

我从控制台得到的信息：

File {webkitRelativePath: "", lastModified: 1418160606000, lastModifiedDate: Tue Dec 09 2014 20:30:06 GMT-0100 (Hora padrão dos Açores), name: "100371.jpg", type: "image/jpeg"…}
Before send.
Modal it's opened
success.
[]
Complete.

这是我的多种形式：

<form action="http://xxxxxxx.dev/admin/photos/upload" id="upload_form" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<input type="file" name="images_upload_new_album[]" value="" id="images_upload_new_album" class="hidden_images_upload" style="visibility: hidden; width: 0px; height: 0px" multiple="multiple" accept=".jpg"  />
</form>

【问题讨论】：

问题是什么究竟？您是否将上面的 jQuery 包装在 $('#upload_form').submit(function(e){ e.preventDefault(); ... }); 中？当我运行您的代码时，我会在控制台中获取每个上传文件的信息。你想用success回调做什么？为什么要在循环中处理这个？难道你不能只处理来自 PHP 的 JSON 响应来检查每个文件上传语句，例如：file1 : success, file2 : fail, ... 吗？您希望总体实现什么？帮助我们帮助你:-)
我不知道如何在 jquery 中为每个上传的文件获取单独的响应。我想要实现的是分别上传我的文件，这样我就可以完成文件 1 上传，然后上传文件 2 等。如果我提交表单，所有文件将同时提交。在此先感谢 ;)

标签： php jquery ajax forms file-upload

【解决方案1】：

我通过重新创建 POST 循环解决了这个问题：

    $('#new-album-modal').on('show.bs.modal', function (e) {
        // Runs after show modal event is fired
        var fileInput = document.getElementById ("images_upload_new_album");
        if ('files' in fileInput) {
            jQuery.each($('#images_upload_new_album')[0].files, function(i, file) {
                var data = new FormData();
                data.append('fileinput', file);
                $.ajax({
                    url: config.site + "admin/photos/upload_test",
                    type: 'POST',
                    data: data,
                    dataType: 'json',
                    mimeType:"multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData:false,
                    beforeSend: function (data) {
                        console.log("Before send.");
                        //console.log(data);
                    }, // AJAX request is about to be sent
                    complete: function (data) {
                        console.log("Complete.");
                        //console.log(data);
                    }, // AJAX request has completed
                    success: function(data, textStatus, jqXHR) // AJAX request has completed successfully
                    {
                        console.log("success.");
                        console.log(data);
                    },
                    error: function(jqXHR, textStatus, errorThrown) // AJAX request has completed with errors
                    {
                        console.log("error.");
                    }
                });
            });
        };
    });

这个问题是根据这个帖子解决的：http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax

【讨论】：