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/

  • 相关阅读:
    BNUOJ 34978 汉诺塔 (概率dp)
    hdu1427 速算24点
    vim学习之以退为进——可反复移动和可反复改动的美妙结合
    C++设计模式实现--策略(Strategy)模式
    ios怎样在一个UIImageButton的里面加一些自己定义的箭头
    HTML5 Canvas 画图入门
    AT3728 Squirrel Migration
    HTTP请求的GET与POST方式的区别
    HTTP 的请求过程?
    servlet的生命周期
  • 原文地址:https://www.cnblogs.com/myphper/p/4794443.html
Copyright © 2011-2022 走看看