zoukankan      html  css  js  c++  java
  • HTML5多文件上传

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

  • 相关阅读:
    0302思考并回答一些问题
    1231 实验四 递归下降语法分析程序设计
    1118 实验三 有限自动机的构造与识别
    1112对他人的博客评论及建议
    1029c语言文法
    1022词法分析实验总结
    词法分析
    0330 复利计算——单元测试
    0321 读《构建之法》第一,二,三章有感
    0316 复利计算总结(0330 更新)
  • 原文地址:https://www.cnblogs.com/myphper/p/4794443.html
Copyright © 2011-2022 走看看