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 });