html5文件上传

初识html5 File API实现带有进度提示的文件上传

二次信任 提交于 2019-12-04 07:27:31
Html5终于解决了上传文件的同时显示文件上传进度的老问题。现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipart/form-data,但是需要修改服务器端可用才能显示给用户文件上传的进度。本质上你需要做的工作是在服务器端接收一个文件时,你发送给它一个字节流,所以你需要知道你已经接收到多少字节并以某种方式传达这些信息给客户端浏览器,在这个过程一直在不断的进行文件的上传。这种方式运行的非常好,不像Flash上传那这样充满了问题(特别是处理大文件上传的时候),然而这种方法是相当复杂的并且听起来不容易理解,因为你本质上是接管了整个服务器端的处理(获取字节流的时候)同时包括了在服务器端实现multipart/form-data协议,伴随一系列的其他事情。 使用Html5 上传文件 XMLHttpRequest 在Html5 规范中已经有全新的变化,规定了 XMLHttpRequest Level 2 规范(目前最新版本)包含下列新的特性: 处理字节流,例如作为上传或者下载的File,Blob,FormData对象 上传或者下载中的进度事件 跨站点请求 允许创建匿名请求 可以设置请求超时 在这篇文章中我们将能够更清楚的看到#1和#2两个特性。通常,上传文件用XMLHttpRequest并且提供上传进度信息给最终的用户