jquery - 进度条未正确显示 - 使用 ajax 上传文件

Question

for( var i=0; i<=input.length-1; i++ )
{

    // Append all files in the formData.
    formData.append( 'files[]', input[i] );

    // Create progress element.
    var progressElement = jQuery( '<li class="working"><input type="text" value="0" data-width="32" data-height="32"'+
            ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>' );

    // Append the file name and file size.
    var fileName = fileContentArray[i];

    progressElement.find( 'p' ).text( fileName )
    .append( '<i>' + fileSizeArray[i] + '</i>' );

    // Add the HTML to the UL element.
    progressElement.appendTo( jQuery( '#upload ul' ) );

    // Initialize the knob plugin.
    progressElement.find( 'input' ).knob();

    // Ajax function.
    formData.append( 'action', 'auto_post' );
    jQuery.ajax
    ({
        url: ajaxurl,
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        xhr: function()
        {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener( 'progress', function( e )
            {
                if( e.lengthComputable )
                {
                    // Append progress percentage.
                    var progressValue = ( e.loaded / e.total ) * 100;
                    console.log( i + ':' + progressValue );
                    progressElement.find( 'input' ).val( progressValue ).change();

                    // Listen for clicks on the cancel icon.
                    progressElement.find( 'span' ).click( function()
                    {
                        if( progressElement.hasClass( 'working' ) )
                        {
                            xhr.abort();
                        }

                        progressElement.fadeOut( function()
                        {
                            progressElement.remove();
                        });
                    });

                    if( progressValue == 100 )
                    {
                        progressElement.removeClass( 'working' );
                    }
                }
            }, false);
            return xhr;
        }
   });
}

以上代码完美上传文件。如图所示，只有最后一张图像取得了进展。执行 console.log( i + ':' + ProgressValue ); 时，这还显示仅附加最后一个图像进度。

更有趣的是，如果我在下面放置一个警报:

    xhr: function()
    {
        alert('f');
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener( 'progress', function( e )

然后我得到的输出是这样的:

然后我使用了 setTimeout 函数，但这也没有帮助我。是什么导致了这种行为？我希望你们能理解我的问题。任何帮助将不胜感激。

Answer 1

这是因为你在循环中执行...

i 变量将始终是最后一个。

您可以在闭包内进行操作以防止这种情况......

for( var i=0; i<=input.length-1; i++ )
{

(function(i) {

// Append all files in the formData.
formData.append( 'files[]', input[i] );

// Create progress element.
var progressElement = jQuery( '<li class="working"><input type="text" value="0" data-width="32" data-height="32"'+
        ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>' );

// Append the file name and file size.
var fileName = fileContentArray[i];

progressElement.find( 'p' ).text( fileName )
.append( '<i>' + fileSizeArray[i] + '</i>' );

// Add the HTML to the UL element.
progressElement.appendTo( jQuery( '#upload ul' ) );

// Initialize the knob plugin.
progressElement.find( 'input' ).knob();

// Ajax function.
formData.append( 'action', 'auto_post' );
jQuery.ajax
({
    url: ajaxurl,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    xhr: function()
    {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener( 'progress', function( e )
        {
            if( e.lengthComputable )
            {
                // Append progress percentage.
                var progressValue = ( e.loaded / e.total ) * 100;
                console.log( i + ':' + progressValue );
                progressElement.find( 'input' ).val( progressValue ).change();

                // Listen for clicks on the cancel icon.
                progressElement.find( 'span' ).click( function()
                {
                    if( progressElement.hasClass( 'working' ) )
                    {
                        xhr.abort();
                    }

                    progressElement.fadeOut( function()
                    {
                        progressElement.remove();
                    });
                });

                if( progressValue == 100 )
                {
                    progressElement.removeClass( 'working' );
                }
            }
        }, false);
        return xhr;
    }
  });

})(i);

}