HTML5 File API初探 支持文件拖放上传功能

新一代Web开发标准HTML 5可以带来远远超出其本身作为一种标记语言的能力，除我们之前介绍的HTML 5可完美支持视频音频元素外，还提供一些强大的脚本工具，负责监督HTML5发展进程的W3C组织，刚刚出版了一份有关文档操作API的规格草案，HTML5 File API 接口功能。

该HTML5 File API的设计初衷，是改善基于浏览器的Web应用程序处理文件上传的方式，使文件直接拖放上传成为可能。草案定义了新的输入选项 ﹤input type=”file”﹥ 来处理文件上传。

更为惊喜的是，该API为开发者提供了一个关联上传数据，并显示上传进度和其他信息的方法。

不过，目前除了Firefox 3.6之外，良好支持该API的浏览器品牌为数不多。尽管如此，一旦新功能得到广泛支持，HTML5 File API 就能实现类似桌面的文件拖放效果，并且有能力同步处理多个上传并显示上传进度，不再需要借助 Flash 技术或其他外部工具。

欲了解更多关于 HTML5 File API 草案的细节，以及结合Javascript的开发应用，请详细参考W3C publish first working draft of File API的文档。

W3C publish first working draft of File API：http://ajaxian.com/archives/w3c-publish-first-working-draft-of-file-api

时间： 2024-10-24 23:06:38

HTML5 File API初探 支持文件拖放上传功能的相关文章

HTML 5 File API：文件拖放上传功能

即将到来的 html5 规范有几个特性,以致使 HTML 远远超出其本身作为一种标记语言的能力,并为 Web 开发者提供了一些强大的脚本工具.负责监督 HTML5 发展进程的 W3C 组织,刚刚出版了一份强有力的规格草案 – HTML5 File API 接口功能. 该 API 的设计初衷,是改善基于浏览器的 Web 应用程序处理文件上传的方式,使文件直接拖放上传成为可能.草案定义了新的输入选项 <input type=”file”> 来处理文件上传. 更为惊喜的是,该 API 为开发者提供了

赞！带进度条的 jQuery 文件拖放上传插件

jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 Hack 的方式使之兼容那些古老的浏览器.jQuery File Uploader 重点是现代浏览器,而且还提供了一个方法让你知道什时候插件不支持使用. 立即下载      在线演示 jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作

HTML5 File API +JavaSevlet 实现文件上传实时更新进度

1. [代码]java1.8+Tomcat8.0 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 7

HTML5 实现文件拖放上传

1. [图片] 5375acf5gw1dusqsscfksj.jpg ?2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" >    <head>        <meta charset="utf-8" />        <title>OSCTools JsBin在线演示-HTML5 Drag & Drop 多文件上传 from Script Tutor

html5+php实现文件拖动上传功能

界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规的选择文件上传,另外的就是添加网络图片.它很巧妙的把三种上传模式整合到了一起,而且你可以用IE浏览器浏览下,如果不支持HTML5,是没有拖拽上传图片的提示的,如图: 拖拽上传最重要的就是js部分的代码,它实现了70%的功能,另外30%仅仅是把图片信息提交到后台,然后做对应的处理,比如压缩啊,裁剪啊云云.所以先来看

使用servlet3.0提供的API来进行文件的上传操作

servlet 3.0针对文件上传做了一些优化,提供了一些更加人性化的API可以直接在request中的到文件的名称.文件size,MIME类型,以及用InputStream表示的文件流的信息 @RequestMapping(value = "/add", method = RequestMethod.POST) @ResponseBody public String addFile(HttpServletRequest request) throws IOException, Ser

html5调用手机摄像头，实现拍照上传功能

今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在火的不行的html5,html5中的<video>标签,并将从摄像头获得视频作为这个标签的输入来源.实现拍照功能的html5代码: <article> <style scoped> video { transform: scaleX(-1); } p { text-alig

HTML5 file API加canvas实现图片前端JS压缩并上传 （转载）

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片

web大文件上传解决方案支持分片断点上传

一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输.关闭浏览器后保留进度信息. 支持文件夹批量上传下载,服务器端保留文件夹层级结构,服务器端文件夹层级结构与本地相同. 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验:支持文件夹上传,文件夹中的文件数量达到1万个以上,且包含层级结构. 支持断点续传,关闭浏览器或刷新浏览