文章转载自: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. [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 ...

  2. zoj 1655 单源最短路 改为比例+最长路

    http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemId=655 没有理解清题意就硬套模板.所以WA了好几次. 解析看我的还有一篇http ...

  3. HDU4324 Triangle LOVE【拓扑排序】

    Triangle LOVE Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) To ...

  4. MAVEN自己主动部署到tomcat

    前面几篇文章maven生成的war包都是手动部署到tomcat,显然这样是非常麻烦的.那么这一篇文章就来介绍一个怎样使用maven高速自己主动的部署项目到tomcat容器中. 1.首先我们须要配置to ...

  5. PHP使用数组实现队列(实际就是先进先出怎样实现)

    PHP的数组处理函数还能够将数组实现队列,堆栈是"先进后出". 在堆栈中,最后压入的数据(进栈),将会被最先弹出(出栈).而队列是先进先出.就如同银行的排号机 PHP中将数组当做一 ...

  6. UE4 中的人工智能解析—ShooterGame为例

    在UE4编辑器中,打开内容浏览器,右击鼠标,创建传说中的行为树: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQTM2MzA2MjM=/font/5a6L ...

  7. Mvc前后端显示不同的404错误页

    最近做的系统前端是移动端的,后端是PC端,然后404页面不能用通一个,so  查找了一些资料,找到了一个解决办法 在Global.asax文件夹下添加Application_EndRequest事件处 ...

  8. 在shell脚本中使用代理

    设置所有的代理走socks5 export ALL_PROXY="socks5://127.0.0.1:1080" 取消代理 unset ALL_PROXY  

  9. POJ 3669 简单BFS

    标号 搜 完了-- //By SiriusRen #include <queue> #include <cstdio> #include <cstring> #in ...

  10. Hadoop 框架基础(四)

    ** Hadoop 框架基础(四) 上一节虽然大概了解了一下 mapreduce,徒手抓了海胆,不对,徒手写了 mapreduce 代码,也运行了出来.但是没有做更深入的理解和探讨. 那么…… 本节目 ...