HTML5多文件上传
文章转载自:http://xiechengxiong.com/288.html
一个简单的HTML5多文件上传demo。
以前我们上传文件的时候,如果通过js上传,我们无法在本地直接预览图片,还得跑到服务器回来之后再预览,而且没办法监控进度。
尽管通过flash能够实现本地预览了,而且也能监控进度了,但是始终两个不同的技术平台,相互之间衔接也太麻烦了。
HTML5的最新File API于是就带给了我们很多有趣的东西,带来了全新的文件上传体验。
1、多文件
只要的file表单input上加上 multiple=”multiple”(注意:只加multiple也行,但是符合XHTML最佳)属性,就能一次性选择多个本地文件到表单缓冲区了。
2、本地预览
通过FileReader对象,我们可以构造一个文件特殊编码器,将文件以特殊的形式进行读取,如果是图片,这种编码放到img标签的src属性中就能直接显示图片了,而且还不会发生请求。
3、异步上传
借鉴于ajax的异步机制,通过FormData对象,可以将file表单的值进行编码后发到后台服务器,后台服务器对接受到的数据以传统文件方式进行处理,然后以ajax的方式进行返回。
4、进度监控
上传文件的时候,可以通过事件机制随时监控文件上传的进度,这其中最重要的属于progress和load事件。progress是指实时进度发生 事件,它每隔一段时间就发生一次,报告单个文件的以上传体积。load事件是指文件上传完成并成功返回,用这个事件我们可以判断多文件上传时的总体进度以 及上传完成的时机。
想了解更多File API的知识,可以到这里去看看:http://www.w3.org/TR/FileAPI/
demos地址:http://xiechengxiong.com/xui/demos/multifile/
HTML5多文件上传的更多相关文章
- MVC5:使用Ajax和HTML5实现文件上传功能
引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...
- html5拖动文件上传
使用html5的fileReader api <!DOCTYPE html><html lang="en"><head> <meta ch ...
- html5 ajax 文件上传
http://html5demos.com/dnd-upload 看这个例子看了一会儿...这个是支持拖拽的上传. 下面代码是一个简单的ajax的文件上传: function match(url,rs ...
- 关于 HTML5 的文件上传处理,兼容性问题,以及 BLOB 对象的使用 (转载)
研究过程中关于本主体的相关参考 好文:https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ 好文:http: ...
- 前端开发之旅- 移动端HTML5实现文件上传
一. 在一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api 然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...
- HTML5 JavaScript 文件上传
function fileUpload(targetUrl) { // 隐藏表单名称 var inputName = '_fileselect'; // 文件尺寸 this.fileSize = 0; ...
- 移动端HTML5实现文件上传
PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术 ...
- 基于HTML5 Ajax文件上传进度条如何实现(jquery版本)
<!DOCTYPE html> <html> <head> <title>html5_2.html</title> <meta htt ...
- 一款基于uploadify扩展的多文件上传插件,完全适用于Html5
http://www.uploadify.com/documentation/ 官网里面有两个插件,一个是要使用flash插件才能文件上传的插件,另外一个是不需要使用要flash插件的文件上传插件完 ...
随机推荐
- [Angular] Configure an Angular App at Compile Time with the Angular CLI
Compile time configuration options allow you to provide different kind of settings based on the envi ...
- zoj 1655 单源最短路 改为比例+最长路
http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemId=655 没有理解清题意就硬套模板.所以WA了好几次. 解析看我的还有一篇http ...
- HDU4324 Triangle LOVE【拓扑排序】
Triangle LOVE Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) To ...
- MAVEN自己主动部署到tomcat
前面几篇文章maven生成的war包都是手动部署到tomcat,显然这样是非常麻烦的.那么这一篇文章就来介绍一个怎样使用maven高速自己主动的部署项目到tomcat容器中. 1.首先我们须要配置to ...
- PHP使用数组实现队列(实际就是先进先出怎样实现)
PHP的数组处理函数还能够将数组实现队列,堆栈是"先进后出". 在堆栈中,最后压入的数据(进栈),将会被最先弹出(出栈).而队列是先进先出.就如同银行的排号机 PHP中将数组当做一 ...
- UE4 中的人工智能解析—ShooterGame为例
在UE4编辑器中,打开内容浏览器,右击鼠标,创建传说中的行为树: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQTM2MzA2MjM=/font/5a6L ...
- Mvc前后端显示不同的404错误页
最近做的系统前端是移动端的,后端是PC端,然后404页面不能用通一个,so 查找了一些资料,找到了一个解决办法 在Global.asax文件夹下添加Application_EndRequest事件处 ...
- 在shell脚本中使用代理
设置所有的代理走socks5 export ALL_PROXY="socks5://127.0.0.1:1080" 取消代理 unset ALL_PROXY
- POJ 3669 简单BFS
标号 搜 完了-- //By SiriusRen #include <queue> #include <cstdio> #include <cstring> #in ...
- Hadoop 框架基础(四)
** Hadoop 框架基础(四) 上一节虽然大概了解了一下 mapreduce,徒手抓了海胆,不对,徒手写了 mapreduce 代码,也运行了出来.但是没有做更深入的理解和探讨. 那么…… 本节目 ...