异步图片上传

FormData
ajax
xrh
XMLHttpRequestUpload
progress

FormData

利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,可以根据form元素直接创建formdata对象,这时formdata就包含了form中的信息

var formdata = new FormData (form)

使用FormData的最大优点就是我们可以异步上传一个二进制文件，如图片、文件等。

例

<form id="upload-form" action="test.php" enctype="multipart/form-data" method = "post">
<input type="file"  multiple="multiple" name="upload_files[]">
</form>

var formData = new FormData ($('#upload-form')[0]);

这样我们就得到了input中的要上传的文件。

ajax

我们使用jQuery的$.ajax。FormData 可以直接作为data进行上传.

$.ajax({
            url : $("#upload-form").attr('action'),
            type: 'post',
            data: formData, //直接使用formdata对象
            cache: false,
            processData:false,
            /** 
             * 必须false
             * 默认情况下jQuery会对 formdata 经行处理
             * 这种处理会破坏数据
             * 设为false后jQuery就不会去处理了
             * 交给XMLHttpRequest进行正确的处理 
             */  
            contentType:false,
            /** 
             *必须false才会自动加上正确的Content-Type 
             */ 
            success:successDo()
        })
    });

xhr

xhr 是jQuery.ajax的一个参数，用于重写或者提供一个增强的XMLHttpRequest 对象，简单地讲就是可以在原来的XMLHttpRequest 对象上添加一些自己的处理。$.ajaxSettings.xhr();可以获得动过ajax正常返回的XMLHttpRequest 对象。在重写xhr方法时，先调用这个函数获得基本的XMLHttpRequest 对象，然后对这个对象做处理，达到想要的效果。
在此我们想完成一个监听上传进度的功能。

xhr: function() {  // custom xhr
    myXhr = $.ajaxSettings.xhr();
    if(myXhr.upload){ // check if upload property exists
        myXhr.upload.addEventListener('progress',progressFunction, false); // for handling the progress of the upload
        }
        return myXhr;
},

XMLHttpRequestUpload

在上面的代码中有一个 myXhr.upload 这个属性api没有多讲，但是说到

可以在 upload 上添加一个事件监听来跟踪上传过程。

在console里打印出来

XMLHttpRequestUpload

可以看到其中除了事件监听没有其他属性和方法，而最下面可以看出它的原型的原型就是一个XMLHttpRequestEventTarget。很明显他本身就是一个事件处理程序。

XMLHttpRequestEventTarget是一个描述事件处理程序的接口，你可以在一个用于处理XMLHttpRequest事件的对象中使用到该事件处理程序。

XMLHttpRequestEventTarget API

我们写一个事件处理函数 , 看看会返回一个什么样的对象

function progressFunction(e){
    console.log(e);
}

这里写图片描述

其中几个重要的常用的属性 lengthComputable loaded total

属性	值	描述
lengthComputable	Boolean	进度信息是否可用。
loaded	number	进程的当前值。
total	number	进程的总量。

有了这些值我们就能让用户看到上传的进度。

progress

在html5中有一个<progress> 的标签，定义运行中的进度（进程）。

属性	值	描述
max	number	定义完成的值。
value	number	定义进程的当前值。

用这个我们就可以在刚才的 progressFunction 中处理进度的显示

<progress><span><span>%</progress>

function progressFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
        $('progress span').text((e.loaded / e.total)*100);
    }
}

自此我们就完成了图片的异步上传并显示进度信息。