文章转载自: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多文件上传的更多相关文章

  1. MVC5:使用Ajax和HTML5实现文件上传功能

    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...

  2. html5拖动文件上传

    使用html5的fileReader api <!DOCTYPE html><html lang="en"><head> <meta ch ...

  3. html5 ajax 文件上传

    http://html5demos.com/dnd-upload 看这个例子看了一会儿...这个是支持拖拽的上传. 下面代码是一个简单的ajax的文件上传: function match(url,rs ...

  4. 关于 HTML5 的文件上传处理,兼容性问题,以及 BLOB 对象的使用 (转载)

    研究过程中关于本主体的相关参考 好文:https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ 好文:http: ...

  5. 前端开发之旅- 移动端HTML5实现文件上传

    一. 在一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...

  6. HTML5 JavaScript 文件上传

    function fileUpload(targetUrl) { // 隐藏表单名称 var inputName = '_fileselect'; // 文件尺寸 this.fileSize = 0; ...

  7. 移动端HTML5实现文件上传

    PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术 ...

  8. 基于HTML5 Ajax文件上传进度条如何实现(jquery版本)

    <!DOCTYPE html> <html> <head> <title>html5_2.html</title> <meta htt ...

  9. 一款基于uploadify扩展的多文件上传插件,完全适用于Html5

    http://www.uploadify.com/documentation/  官网里面有两个插件,一个是要使用flash插件才能文件上传的插件,另外一个是不需要使用要flash插件的文件上传插件完 ...

随机推荐

  1. LightOJ - 1038 Race to 1 Again 递推+期望

    题目大意:给出一个数,要求你按一定的规则将这个数变成1 规则例如以下,如果该数为D,要求你在[1,D]之间选出D的因子.用D除上这个因子,然后继续按该规则运算.直到该数变成1 问变成1的期望步数是多少 ...

  2. 微信iOS SDK文档总结

    至今共19个类.分3大类. (1)请求与响应类:微信终端和第三方程序:第三方程序和微信server. BaseReq:全部请求类的基类. GetMessageFromWXReq:微信终端向第三方程序请 ...

  3. RabbitMQ inequivalent arg 'durable' for exchange 'csExchange' in vhost '/': received

    错误:inequivalent arg 'durable' for exchange 'csExchange' in vhost '/': received 使用不同的MQ客户端时,常常会出现以上错误 ...

  4. Cannot find the class file for javax.servlet.ServletContext.

    当eclipse中新导入的Java Project的时候.往往会碰到各种各样的问题,以下是个典型的问题: Cannot find the class file for javax.servlet.Se ...

  5. JS学习笔记-数据类型

    最初的JS学习已经过去大半年的时间了,至此感觉对JS的使用与理解并非非常深入,因此在近期的工作之余也開始了新一轮的JS学习. 几天时间过去了,对于一些基础内容的学习还是非常有必要的,就从今天的又一次整 ...

  6. windows tensorflow 版本与升级

    tensorflow 的版本在 1.1.0/1.2.0 之后 api 迎来重大变化,有必要将版本升级到最新的 1.1.0 以上. 1. 使用 upgrade CPU:pip3 install –upg ...

  7. Minikube之Win10单机部署Kubernetes(k8s)自动化容器操作的开源平台

    Minikube之Win10单机部署 Kubernetes(k8s)是自动化容器操作的开源平台,基于这个平台,你可以进行容器部署,资源调度和集群扩容等操作.如果你曾经用过Docker部署容器,那么可以 ...

  8. 微信公众平台开发学习笔记2--获取access token

    access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.获取的access_token过期时间为2小时.获取access token具体说明请参考官方文档. ...

  9. java中"".equals(A)与A.equals("")一样不?

    不一样如果a为nulla = null;a.equals("")出错nullPointerException如果写为"".equals(a)-->就可以防 ...

  10. 包及常用模块(time、datetime、random、sys)

    什么是包?‘ #官网解释 Packages are a way of structuring Python’s module namespace by using “dotted module nam ...