HTML5结合ajax实现文件上传以及进度显示

html代码：

<input type="file" name="file" id="abc" class="aaa" οnchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">

js代码：

function showPreview(source) {
    var file = source.files[0];
    console.log(file);
    if(window.FileReader) {
        var fr = new FileReader();
        fr.onloadend = function(e) {
        
            document.getElementById("portrait").src = e.target.result;
        };
        fr.readAsDataURL(file);
        
    }
    
    var myForm = new FormData();
 
    myForm.append("name", "张三");
    //myForm.append("userfile", document.getElementById('abc').files[0]);这样也可以
    myForm.append("file", file);
     
    $.ajax({
      type:'POST',
      processData:false,
      contentType:false,
      url:'get.php',
      xhr: xhr_provider,
      data:myForm
    });
}
 
function on_progress(evt) {
     if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
};
var xhr_provider = function() {
    var xhr = jQuery.ajaxSettings.xhr();
    if(on_progress && xhr.upload) {
        xhr.upload.addEventListener('progress', on_progress, false);
    }
    return xhr;
};

参考链接：

http://www.hello-code.com/blog/html5/201403/2913.html

http://www.cnblogs.com/idche/archive/2011/05/16/2047758.html

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData#append()

http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html

http://www.matlus.com/html5-file-upload-with-progress/

http://www.cnblogs.com/wintersun/archive/2012/08/30/2663408.html

http://david6116.blog.163.com/blog/static/13385556320125481143139/

http://blog.csdn.net/dazhi_100/article/details/20068383

http://keshion.iteye.com/blog/1171445

http://blog.csdn.net/yaoyuan_difang/article/details/38582697