javascript - 图片上传的jQuery Ajax进度

Question

我使用 Ajax 请求在我的服务器上上传图像，我使用这些代码，它可以工作，但它只返回 100%，而不是任何其他百分比。我应该怎么办？

$('#uploadImgForm').change(function(e){
        var th = $(this);
        $.ajax({
            url: "post/imageInsert.php",
            type: "POST",
            data:  new FormData(this),
            dataType: 'json',
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $("#imgBack").html('uploading').show();
            },
            xhr: function()
            {
                var xhr = new window.XMLHttpRequest();
                //Upload progress
                xhr.upload.addEventListener("progress", function(evt){

                    if (evt.lengthComputable) {
                        var percentComplete = Math.floor(evt.loaded / evt.total) * 100 + '%';
                        $('#progress').css({width : percentComplete});
                    }
                }, false);


                return xhr;
            },
            success: function(data){
                if(!data['error']) $("#imgBack").html($('<img>').attr('src',data['success']));
                else $("#imgBack").html(data['error']);
            },
            error: function(){
                $("#imgBack").html('Error').hide();
            }
        });
    });

Answer 1

我最近做了同样的事情（制作一个进度条来指示图像上传完成的百分比）并且以下代码有效；试试看：

$("#uploadImgForm").on("submit", upload_image);

function update(evt){
    var percentComplete = Math.floor(evt.loaded / evt.total) * 100 + '%';
    $('#progress').css({width : percentComplete});
}

 function upload_image(event){
    event = event || window.event;
    // Prevent the default form action i.e. loading of a new page
    if(event.preventDefault){ // W3C Variant
        event.preventDefault();
    }
    else{ // IE < 9
        event.returnValue = false;
    }
    $.ajax({
        url: "post/imageInsert.php",
        type: "POST",
        data: new FormData($('#uploadImgForm')[0]), 

        beforeSend: function(){
            $("#imgBack").html('uploading').show();
        },

        xhr: function(){
            // get the native XmlHttpRequest object
            var xhr = $.ajaxSettings.xhr() ;
            // set the onprogress event handler
            xhr.upload.onprogress = update,
            // set the onload event handler
            xhr.upload.onload = function(){ } ;
            // return the customized object
            return xhr ;
        },
        success: function(data){
            if(!data['error']) $("#imgBack").html($('<img>').attr('src',data['success']));
            else $("#imgBack").html(data['error']);
        },
        error: function(){
            $("#imgBack").html('Error').hide();
        },

        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        cache: false
    });
 }

Answer 2

试试这个代码

$('#uploadImgForm').change(function(e){
     var th = $(this);
     $.ajax({
         url: "post/imageInsert.php",
         type: "POST",
         data:  new FormData(this),
         dataType: 'json',
         contentType: false,
         cache: false,
         processData:false,
         beforeSend: function(){
             $("#imgBack").html('uploading').show();
         },
         xhrFields: {
            onprogress: function (evt) {
               if (evt.lengthComputable) {
                 var percentComplete = Math.floor(evt.loaded / evt.total) * 100 + '%';
                 $('#progress').css({width : percentComplete});
               }
            }
         },
         success: function(data){
             if(!data['error'])                 
                 $("#imgBack").html($('<img>').attr('src',data['success']));
             else
                 $("#imgBack").html(data['error']);
         },
         error: function(){
             $("#imgBack").html('Error').hide();
         }
     });
 });