HTML5预览图片、异步上传文件

注意啦：本文的代码都是以JQuery为示例，jq_开头的变量都是jq对象。

在HTML5中，我们可以在图片上传之前对图片进行预览，就像下面这么做

1 jq_upload_file.change(function(){
2 jq_img.attr("src",window.URL.createObjectURL(this.files.item(0)));
3 jq_div.css("backgroundImage","url("+window.URL.createObjectURL(this.files.item(0))+")");
4 });//end change

那么异步上传文件，就只需要利用HTML5中的FormData，也就是这样：

 1 $.extend({
 2 AjaxUploadFile:function(url,formData,success,failure){
 3 var oReq = new XMLHttpRequest();
 4 oReq.open( "POST", url , true );
 5 oReq.onload = function(oEvent) {
 6 if (oReq.status == 200)
 7 {
 8 if(typeof success=="function") success(oReq);
 9 }
10 else
11 {
12 if(typeof failure=="function") failure(oReg);
13 }
14 };
15 oReq.send(formData);
16 }
17 });

调用：

 1 var form=new FormData();
 2 form.append("pic",jq_upload_file.get(0).files[0]);
 3 //关于这里，其他文章有提到，可以直接传个DOM节点进去，即form.append("pic",jq_upload_file.get(0))
 4 //另外，对于FormData可以将整个表单form的节点传入，形成一个完整的FormData，即var form=new FormData(jq_form.get(0))
 5 $.AjaxUploadFile(
 6 "上传的URL",
 7 form,
 8 function(oReq){
 9 //处理oReq.responseText
10 }
11 );

当然，上传之前，可能需要先验证一下文件大小、类型等等：

 1 $.extend({
 2 CheckUploadFile:function(jq_input_file){
 3 if(jq_input_file.get(0).files.item(0).size>300*1024)
 4 {
 5 return "文件大于300KB，无法上传";
 6 }
 7 var allow_pic=["jpg","jpeg","png","gif"];
 8 var flag=false;
 9 for(var i in allow_pic)
10 {
11 if(jq_input_file.get(0).files.item(0).type.indexOf(allow_pic[i])!=-1)
12 {
13 flag=true;
14 break;
15 }
16 }
17 return flag?"":"指定的文件格式无法上传";
18 }
19 });