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

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

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

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

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

 $.extend({
 AjaxUploadFile:function(url,formData,success,failure){
 var oReq = new XMLHttpRequest();
 oReq.open( "POST", url , true );
 oReq.onload = function(oEvent) {
 if (oReq.status == 200)
 {
 if(typeof success=="function") success(oReq);
 }
 else
 {
 if(typeof failure=="function") failure(oReg);
 }
 };
 oReq.send(formData);
 }
 });

调用：

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

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

 $.extend({
 CheckUploadFile:function(jq_input_file){
 if(jq_input_file.get(0).files.item(0).size>300*1024)
 {
 return "文件大于300KB，无法上传";
 }
 var allow_pic=["jpg","jpeg","png","gif"];
 var flag=false;
 for(var i in allow_pic)
 {
 if(jq_input_file.get(0).files.item(0).type.indexOf(allow_pic[i])!=-1)
 {
 flag=true;
 break;
 }
 }
 return flag?"":"指定的文件格式无法上传";
 }
 });