使用Progressbar上传Jquery

Question

我有一个Ajax-Upload脚本，可以很好地工作。现在我想添加一个进度条或其他东西。我如何在下面的脚本中实现这样的东西：

  $('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

使用$.ajax是不可能的，您需要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/