如何使用jQuery Ajax PHP上傳文件

Question

我有一個使用jquery的formdata的文件上傳系統，事情就這樣--->

HTML

<form id="upload-form" method="post" enctype="multipart/form-data"   action="resource/php/upload.php">
    <input style="display:none;" type="file" id="upload" multiple>  
    </form> 

JQUERY

$('#upload').change(function(e){

var formdata = new FormData(),file;
$('#ajax-loader').show();   //simple gif loader
    for(var i=0;i<this.files.length;i++){
        file = this.files[i];
            var ftype = file.type;
                formdata.append("files[]", file);           

    }
    if (formdata) { 
            $.ajax({
                url: "resource/php/upload.php",
                type: "POST",
                data: formdata,
                dataType : 'json',
                processData: false,
                contentType: false,
                success: function(data) {
                             $('#ajax-loader').hide();
                            //appends the currently uploaded images in  a div
                             }
                });
 }
});

PHP

//does lot of stuff
// echo's out 2 arrays in json format which is used in appending images as stated earlier^
echo json_encode(array("images"=>$db_image_id,"src"=>$db_image_src));

現在我的問題是，當我選擇使用#upload文件自動上傳文件時，會在文件上傳時顯示和隱藏#ajax-loader 。 但我想顯示一個進度條，以percentage和ETA(time left)代替簡單的$('#ajax-loader') 。 但是我用ajax-form 歌搜索並能夠使用ajax-form jQuery插件來做到這一點。 但是我想以更真實的方式做我不想使用任何插件 。 我該怎么做？

還有一個問題是是否需要使用#upload-form ？

Answer 1

您需要編寫custome xhr函數來跟蹤文件上傳進度

 $.ajax({
                url: "resource/php/upload.php",
                type: "POST",
                data: formdata,
                dataType : 'json',
                processData: false,
                contentType: false,
               //@custome xhr
                xhr: function() {  // custom xhr
                   myXhr = $.ajaxSettings.xhr();
                   if(myXhr.upload){ // check if upload property exists
                       myXhr.upload.addEventListener('progress',progressHandlingFunction,  false); // for handling the progress of the upload
                   }
                   return myXhr;
                },
               //@custome xhr end
                success: function(data) {
                             $('#ajax-loader').hide();
                            //appends the currently uploaded images in  a div
                             }
                });

參見上面的代碼中的@custome xhr注釋，並添加函數以更新進度欄

function updateProgress(evt) {
    console.log('updateProgress');
    if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            console.log(percentComplete);
    } else {
            // Unable to compute progress information since the total size is unknown
            console.log('unable to complete');
    }
}

參考： https : //developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest