注意啦:本文的代码都是以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?"":"指定的文件格式无法上传";
 }
 });

HTML5预览图片、异步上传文件的更多相关文章

  1. jQuery + ashx 实现图片按比例预览、异步上传及显示

    目录(?)[-] 注ajax 方式异步读取数据库显示图片的方法同上传一致使用 ashx 返回base64字符串在客户端处理即可 记录一个让我纠结良久的问题 在Page_Load 函数中只有第一个用 S ...

  2. h5可预览 图片ajax上传 ,后台有点弱不知道数据怎么取,但是可以肯定数据上传成功了

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. php ajax bootstrap多文件上传图片预览,ajax上传文件

    <form enctype="multipart/form-data" id="upForm"> <label class="btn ...

  4. h5可预览 图片ajax上传 (补更),后台数据获取方法---php

    原理是 先获取,然后手动转移文件路径,不然会被服务器自动删除 demo如下: <?php header('content-Type:text/html;charset=utf-8'); $fil ...

  5. HTML5 jQuery+FormData 异步上传文件,带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

  6. Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等

    仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...

  7. 关于js异步上传文件

    好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...

  8. ajax异步上传文件FormDate方式,html支持才可使用

    今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取 是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...

  9. struts2 jquery ajaxFileUpload 异步上传文件

    网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...

随机推荐

  1. Backbone入门讲解

    Backbone是一个实现了web前端mvc模式的js框架. 一种解决问题的通用方法,我们叫做模式. 设计模式:工厂模式,适配器模式,观察者模式等,推荐js设计模式这本书.设计模式是一种思想. 框架模 ...

  2. jQuery Mobile 过渡效果

    jQuery Mobile 包含了允许您选择页面打开方式的 CSS 效果. jQuery Mobile 过渡效果 jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果. 注释:如需实 ...

  3. url上使用#号好不好

    这是一篇摘自百度站长工具的文章. 一般来说,url当中的#号是一个锚点的标志位,这样的url打开之后会将访问者的视线定位在指定位置上,令访问者直接看到网页中间的一段内容.自从推特流行开始,#号被附予了 ...

  4. 微价值:专訪《甜心爱消除》个人开发人员Lee,日入千元!

    [导语]我们希望能够对一些个人开发人员进行专訪,这样大家更能显得接地气,看看人家做什么,怎么坚持.<甜心爱消除>作者Lee是三群的兄弟,也关注微价值.微价值的文章还是能够的,得到一些业内大 ...

  5. HTML5每日一练之input新增加的5种其他类型1种标签应用

    今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好 ...

  6. IDL计算儒略日

    遥感数据还有一些文章中使用数据的时候,经常使用儒略日(Julian day),即计算该天是一年中的第几天.正好有时间,就用IDL写了段儿小代码,方便使用.   ;+   ; :Author: caoz ...

  7. 使用安卓中的TextToSpeech控件实现朗读文字

    首先感谢原文的博主,本文中的代码均来自该博主:(原文地址)http://flycatdeng.iteye.com/blog/1827245 朗读文字不需要任何的权限,这个控件的好处是首先不要权限,其次 ...

  8. 获取调用者Class和method、反射获取get方法、获取注解信息

    调用者Class 及 method StackTraceElement stacks[] = Thread.currentThread().getStackTrace(); for (StackTra ...

  9. iOS开发~制作同时支持armv7,armv7s,arm64,i386,x86_64的静态库.a

    一.概要 平时项目开发中,可能使用第三方提供的静态库.a,如果.a提供方技术不成熟,使用的时候就会出现问题,例如: 在真机上编译报错:No architectures to compile for ( ...

  10. 浅谈JS的数组遍历方法

    用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; ...