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/

  • 相关阅读:
    Github+Jekyll 搭建个人网站详细教程
    github发布博客
    如何在GitHub部署自己的个人网站
    VS2017git 提交提示错误 Git failed with a fatal error.
    CAD 二次开发----- 块
    Updates were rejected because the remote contains work that you do(gitee报错解决方案)
    关于错误CSC : error CS0006:未能找到元数据文件
    js 四舍五入
    spingboot 邮件模板发送;
    springboot 邮件
  • 原文地址:https://www.cnblogs.com/myphper/p/4794443.html
Copyright © 2011-2022 走看看