异步图片上传
- 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里打印出来
可以看到其中除了事件监听没有其他属性和方法,而最下面可以看出 它的原型的原型就是一个XMLHttpRequestEventTarget。很明显他本身就是一个事件处理程序。
XMLHttpRequestEventTarget是一个描述事件处理程序的接口,你可以在一个用于处理XMLHttpRequest事件的对象中使用到该事件处理程序。
我们写一个事件处理函数 , 看看会返回一个什么样的对象
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);
}
}
自此我们就完成了 图片的异步上传 并显示进度信息。