javascript - 使用javascript循环遍历fileList

Question

我在这里试图完成的是为每个上传的文件创建一个单独的 ajax 请求。我有一个 ajax 调用，它创建一个记录并返回一些 html 和 ajax 调用使用的记录的 tempID，该调用在第一次调用成功时执行。此过程似乎运行正常。出现问题的地方是通过 filesList 的循环。在 ajax 调用之前，循环似乎工作正常，但在 ajax 调用期间，当我期望文件列表递增到数组中的下一个文件时，它再次发送第一个文件。

如果我只选择一个文件，那么一切正常。就好像 ajax 调用没有看到变量"file"在有多个文件时在循环开始时被重置....让我难过...

/* Fire the ajax requests when the input files array changes
--------------------------------------------------------------------------*/
$('#theFile').on('change', function()
{
    var len = this.files.length;

    for(var i = 0; i < len; i++)
    {
        var file = this.files[i];
        // console.log(file.name); This shows the correct file name

        var formData = new FormData();
        formData.append("file_" + i, file);

        $.ajax(
        {
            url: '/controllerName/buildImageLoadingDIVS',
            type: 'POST',
            dataType:'json',
            data: 'fileName=' + file.name,
            success: function(data1)
            {
                $('#theImages').append(data1.content);

                formData.append("tempID", data1.tempID);

                // console.log(file.name); 
                // This shows the first filename in the array as if 
                // variable "file" was never set to new filelist

                $.ajax(
                {
                    url: '/controllerName/the_image_upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data2)
                    {
                        $('#temp_wrapper_' + data1.tempID).html(data2);
                    }
                });
            }
        });
    }

Answer 1

您面临关闭问题。由于所有成功回调都共享相同的闭包，因此如果在循环结束后执行任何成功回调(在大多数情况下)，所有成功回调都共享相同的文件值。解决方案是使用 IIFE 创建闭包。

修改后的代码:

       //dummy file array    
        var fileArray = ['file1', 'file2', 'file3']
        var len = fileArray.length;

        for(var i = 0; i < len; i++)
        {
            var file = fileArray[i];
            console.log(file);

            var formData = new FormData();
            formData.append("file_" + i, file);
            (function(params){
                var file = params.file;
                var formData = params.formData;
                        $.ajax(
            {
                //used this url for testing purpose, replace it with yours
                url: 'http://fiddle.jshell.net',
                type: 'get',
                //change the datatype in your implementation
                dataType:'html',
                data: 'fileName=' + file,
                success: function(data1)
                {
                    //$('#theImages').append(data1.content);

                    formData.append("tempID", data1.tempID);

                    console.log("file name in success " + file); 


                    $.ajax(
                    {
                        url: 'http://fiddle.jshell.net',
                        type: 'get',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(data2)
                        {
                                            console.log("success"); 
                        }
                    });
                },
                error : function(){
                    console.log("error");
                }
            });
            })({
                'formData' : formData,
                'file' : file
            });
        }

你可以找到 fiddle here