Jquery Ajax文件上传facebook风格

我有一个：‎ .. 它可以正常工作，但我想要一个像facebook这样的上传进度系统，在上传文件的同时加载窗口，上传进度显示在浏览器的左下角。是否有支持文件上传的jquery ajax表单提交。

您可以使用Xhristener来完成。 我以前也做过类似的事情，下面是我使用的代码片段：

jQuery.ajax({
    url: 'url/to/upload/to',
    data: formMediaData,
    dataType:'json', //return type, in my case it was json
    type: 'post',
    xhr: function(){ 
        // this is the important part
        var xhr = new window.XMLHttpRequest();

        //the event listener will call _very_ often, you might want to check
        // how big the difference between the last percentage and this 
        //percentage is, before you do anything that needs long computing times(!)

        xhr.upload.addEventListener("progress", function(evt){
            //check if the browser can determine the complete size of the data.
            if (evt.lengthComputable) {
                var percentComplete = Math.round((evt.loaded / evt.total)*100);

                //do something with the percentage...

                console.log("upload " +percentComplete + "% done");
            }
        },false);
        return xhr;
    },
    success: function(data){
        //do some tasks after upload
        console.log("upload done");
    }
});

以下是添加文件的方式：

html:

js:

var formMediaData=new FormData（）；
函数handleMediaFiles（文件）{
对于（var i=0；iThanks.我如何将上传的文件附加到“formMediaData”？或者说：“我不想编写任何代码，只需给我代码”？…我将更新答案…ajax调用还应该有
processData:false
和
contentType:false
@Mr.Manhattan所以？！
<!-- accept="image/*" will only accept file miming to be an image, remember to check if it really is an image... -->
<input type="file" id="uploadBox" accept="image/*" onchange="handleMediaFiles(this.files)" />

var formMediaData= new FormData();

function handleMediaFiles(files){
    for(var i=0;i<files.length;i++){
        formMediaData.append('file_'+i,file[i]);
    }
    fileUpload(); // that's where the ajax is sent  
}