jQuery Ajax在图像上传方面的进展

jQuery Ajax progress on image upload

本文关键字：方面 Ajax 图像 jQuery 更新时间：2023-09-26

我使用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();
            }
        });
    });

试试这个代码

$('#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();
         }
     });
 });

我最近也做了同样的事情（制作一个进度条来指示图像上传完成的百分比），下面的代码可以工作；一定要试试：

$("#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
    });
 }