Jquery上傳進度條

Question

我有一個Ajax上傳腳本，工作正常。現在我想添加一個進度條或其他東西。我怎樣才能實現下我的腳本類似的東西：

$('body').on('change', '#uploadFile', function() { 

// Post-Data 
var data = new FormData(); 
data.append('file', this.files[0]); 
data.append('uid', $("#uploadFile").attr('data-uid')); 


// Ajax-Call 
$.ajax({ 
    url: "uploadUserpic.php", 
    data: data, 
    type: "POST", 
    processData: false, 
    contentType: false, 
    success : handleData 
}); 
}); 

function handleData(data) { 
    $("#messagePic").html(data); 

    //do some stuff 
} 

Answer 1

不可能$阿賈克斯，你需要一個XMLHttpRequest對象。 試試這個：

var data = []; 

$.ajax({ 
    xhr: function() { 
     var xhr = new window.XMLHttpRequest(); 
     // For Upload 
     xhr.upload.addEventListener("progress", function (evt) { 
      if (evt.lengthComputable) { 
       var percentComplete = evt.loaded/evt.total; 

      } 
     }, false); 
     // For Download 
     xhr.addEventListener("progress", function (evt) { 
      if (evt.lengthComputable) { 
       var percentComplete = evt.loaded/evt.total; 

      } 
     }, false); 
     return xhr; 
    }, 
    type: 'POST', 
    url: "/echo/html", 
    data: data, 
    success: function (data) {} 
}); 

http://jsfiddle.net/GvdSy/