芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
5

HTML5 File API,文件拖放上传功能

作者 芒果/分类 代码/发布于 2010-01-19 22:55

即将到来的 HTML5 规范有几个特性,以致使 HTML 远远超出其本身作为一种标记语言的能力,并为 Web 开发者提供了一些强大的脚本工具。负责监督 HTML5 发展进程的 W3C 组织,刚刚出版了一份强有力的规格草案 – HTML5 File API 接口功能。

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

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

不过,目前除了 Firefox 3.6 之外,良好支持该 API 的浏览器品牌为数不多。如果你已经安装最新的 Firefox 3.6 版本,可以在以下演示地址体验文件拖放式上传功能。

演示:Firefox 3.6 文件拖放上传功能

尽管如此,一旦新功能得到广泛支持,HTML5 File API 就能实现类似桌面的文件拖放效果,并且有能力同步处理多个上传并显示上传进度,不再需要借助 Flash 技术或其他外部工具。

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

英文原稿:HTML5 File API Brings Drag-and-Drop File Uploads to the Web | Webmonkey
翻译整理:HTML5 File API,文件拖放上传功能 | 芒果

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/html5-file-api-file-drag-and-drop-upload-function/" title="HTML5 File API,文件拖放上传功能" rel="bookmark">HTML5 File API,文件拖放上传功能 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 5 条群众意见

  1. ?
    HTML5 File API:文件拖放上传功能 | 帕兰映像 /2010-01-22 18:13

    […] 英文原稿:HTML5 File API Brings Drag-and-Drop File Uploads to the Web | Webmonkey 翻译整理:HTML5 File API,文件拖放上传功能 | 芒果 […] 回应

    #1
  2. ?
    HTML5 File API:文件拖放上传功能 | TechTrack /2010-02-28 01:44

    […] 英文原稿:HTML5 File API Brings Drag-and-Drop File Uploads to the Web | Webmonkey 翻译整理:HTML5 File API,文件拖放上传功能 | 芒果 […] 回应

    #2
  3. momofiona /2011-02-23 16:03

    从用户体验上讲,这个功能很容易造成误操作,如果拖放到范围以外,浏览器会默认打开这个文件而使页面跳转,这个有没有什么修复措施啊。 回应

    #3
  4. ?
    5 步骤创建 HTML5 离线应用 | 千里走单骑 /2011-06-15 11:03

    […] HTML5 File API,文件拖放上传功能 (3) © 2010 芒果 版权所有 | 固定链接 | 没有评论 | 标签 .htaccess, HTML5 View full post on 芒果小站 […] 回应

    #4
  5. ?
    HTML5 File API,文件拖放上传功能 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /2011-07-05 23:53

    […] 转载至:HTML5 File API,文件拖放上传功能 | 芒果小站 分类: html, 其它 标签: 临时 浏览器简史IE 表单控件的按钮聚焦问题Minify,合并压缩 JavaScript 和 CSS 文件28 款网页设计工具和生成器YUI3:判断表单元素是否为空或选中20 款 CSS 资源网站收集推荐MySQL Proxy – MySQL代理的介绍及个人使用经验[MySQL 5.1 体验]MySQL 实例管理器 mysqlmanager 初试mysqldump 导出的sql文件导入时提示Unknown command ‘[’解决.MySQL Memcache_engine的安装与使用 评论 (0) Trackbacks (0) 发表评论 Trackback […] 回应

    #5

下面我简单说几句