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插件的文件上传插件完 ...
随机推荐
- LightOJ - 1038 Race to 1 Again 递推+期望
题目大意:给出一个数,要求你按一定的规则将这个数变成1 规则例如以下,如果该数为D,要求你在[1,D]之间选出D的因子.用D除上这个因子,然后继续按该规则运算.直到该数变成1 问变成1的期望步数是多少 ...
- 微信iOS SDK文档总结
至今共19个类.分3大类. (1)请求与响应类:微信终端和第三方程序:第三方程序和微信server. BaseReq:全部请求类的基类. GetMessageFromWXReq:微信终端向第三方程序请 ...
- RabbitMQ inequivalent arg 'durable' for exchange 'csExchange' in vhost '/': received
错误:inequivalent arg 'durable' for exchange 'csExchange' in vhost '/': received 使用不同的MQ客户端时,常常会出现以上错误 ...
- Cannot find the class file for javax.servlet.ServletContext.
当eclipse中新导入的Java Project的时候.往往会碰到各种各样的问题,以下是个典型的问题: Cannot find the class file for javax.servlet.Se ...
- JS学习笔记-数据类型
最初的JS学习已经过去大半年的时间了,至此感觉对JS的使用与理解并非非常深入,因此在近期的工作之余也開始了新一轮的JS学习. 几天时间过去了,对于一些基础内容的学习还是非常有必要的,就从今天的又一次整 ...
- windows tensorflow 版本与升级
tensorflow 的版本在 1.1.0/1.2.0 之后 api 迎来重大变化,有必要将版本升级到最新的 1.1.0 以上. 1. 使用 upgrade CPU:pip3 install –upg ...
- Minikube之Win10单机部署Kubernetes(k8s)自动化容器操作的开源平台
Minikube之Win10单机部署 Kubernetes(k8s)是自动化容器操作的开源平台,基于这个平台,你可以进行容器部署,资源调度和集群扩容等操作.如果你曾经用过Docker部署容器,那么可以 ...
- 微信公众平台开发学习笔记2--获取access token
access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.获取的access_token过期时间为2小时.获取access token具体说明请参考官方文档. ...
- java中"".equals(A)与A.equals("")一样不?
不一样如果a为nulla = null;a.equals("")出错nullPointerException如果写为"".equals(a)-->就可以防 ...
- 包及常用模块(time、datetime、random、sys)
什么是包?‘ #官网解释 Packages are a way of structuring Python’s module namespace by using “dotted module nam ...