首页 > Web开发 > 详细

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

时间:2015-11-21 10:33:50      阅读:420      评论:0      收藏:0      [点我收藏+]

注意啦:本文的代码都是以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 });

 

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

原文:http://www.cnblogs.com/ddcoder/p/4982971.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!