Html5终于解决了上传文件的同时显示文件上传进度的老问题。现在大部分的网站用Flash去实现这一功能，还有一些网站继续采用Html <form>with enctype=multipart/form-data，但是需要修改服务器端可用才能显示给用户文件上传的进度。本质上你需要做的工作是在服务器端接收一个文件时，你发送给它一个字节流，所以你需要知道你已经接收到多少字节并以某种方式传达这些信息给客户端浏览器，在这个过程一直在不断的进行文件的上传。这种方式运行的非常好，不像Flash上传那这样充满了问题(特别是处理大文件上传的时候)，然而这种方法是相当复杂的并且听起来不容易理解，因为你本质上是接管了整个服务器端的处理（获取字节流的时候）同时包括了在服务器端实现multipart/form-data协议，伴随一系列的其他事情。

使用Html5 上传文件

XMLHttpRequest 在Html5 规范中已经有全新的变化，规定了XMLHttpRequest Level 2规范（目前最新版本）包含下列新的特性：

  1. 处理字节流，例如作为上传或者下载的File，Blob，FormData对象
  2. 上传或者下载中的进度事件
  3. 跨站点请求
  4. 允许创建匿名请求
  5. 可以设置请求超时

在这篇文章中我们将能够更清楚的看到#1和#2两个特性。通常，上传文件用XMLHttpRequest并且提供上传进度信息给最终的用户，需要注意的是这种方式解决了不需要服务器端做任何改变，至少是目前处理multipart/form-data协议。所以服务器端的处理逻辑保留不变，这使得开发者适应这种技术相当容易。

 图1：文件上传画面-准备上传  图2：显示上传完成画面

注意：上面的图片中，信息提示区域是提供给用户的：

  1. 当前选中文件的信息

    • 文件名
    • 文件大小
    • 文件类型
  2. 上传完成多少的百分比进度条
  3. 上传速度或者上传带宽
  4. 距离上传完成大概还有多长时间
  5. 已上传文件大小
  6. 服务器端的响应

上面第6项或许看起来不重要，但事实上是相当重要的。因为我们用XMLHttpRequest，上传发生在后台，页面没有发生跳转等任何变化，所以对于你用它处理其他一些事情来说是一个非常好的特性。

Html5 Progress Event

对于Html5 Progress Events规范，Html5 Progess Events提供了下列与本次讨论相关的信息

  1. total - 总的字节数
  2. loaded - 到目前为止上传的字节数
  3. lengthComputable - 可计算的已上传字节

请注意到我们需要用两个信息去计算要显示给用户的其他所有信息。要计算出来其他的信息通过上面我们得到信息是相当容易的，但是那需要一些额外的代码并且创建一个定时器。

Html5 Progress Event 应该是什么

考虑到有一部分人想更好的提供给用户所有的信息，所以Html5 Progress Event应该更好的满足需要，因为它给浏览器供应商提供这些额外信息是相当简单的，所以建议progress event应该修改成如下：

  1. total - 总的字节数
  2. loaded - 到目前为止上传的字节数
  3. lengthComputable - 可计算的已上传字节
  4. transferSpeed long类型
  5. timeRemaining JavaScript 日期对象

Html5 上传 用XMLHttpRequest

浏览器支持情况

支持这一特性的浏览器最低版本

  1. Firefox 4.0 beta 6
  2. Chrome 6
  3. Safari 5.02

IE 9 Beta and Opera 10.62 不支持这一特性

简单的示例

下面是一个完整的Html页面包含了实现文件上传并带有进度提示的JavaScript代码，只是实现了基本的功能，感兴趣的可以自己做扩展。 需要吧上传接口修改成自己服务的。

<!DOCTYPE html>

<html>

<head>

    <title>Upload Files using XMLHttpRequest - Minimal</title>

    <script type="text/javascript">

      function fileSelected() {

        var file = document.getElementById('fileToUpload').files[];

        if (file) {

          var fileSize = ;

          if (file.size >  * )

            fileSize = (Math.round(file.size *  / ( * )) / ).toString() + 'MB';

          else

            fileSize = (Math.round(file.size *  / ) / ).toString() + 'KB';

          document.getElementById('fileName').innerHTML = 'Name: ' + file.name;

          document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;

          document.getElementById('fileType').innerHTML = 'Type: ' + file.type;

        }

      }

      function uploadFile() {

        var fd = new FormData();

        fd.append("fileToUpload", document.getElementById('fileToUpload').files[]);

        var xhr = new XMLHttpRequest();

        xhr.upload.addEventListener("progress", uploadProgress, false);

        xhr.addEventListener("load", uploadComplete, false);

        xhr.addEventListener("error", uploadFailed, false);

        xhr.addEventListener("abort", uploadCanceled, false);

        xhr.open("POST", "upload.do");//修改成自己的接口

        xhr.send(fd);

      }

      function uploadProgress(evt) {

        if (evt.lengthComputable) {

          var percentComplete = Math.round(evt.loaded *  / evt.total);

          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';

        }

        else {

          document.getElementById('progressNumber').innerHTML = 'unable to compute';

        }

      }

      function uploadComplete(evt) {

        /* 服务器端返回响应时候触发event事件*/

        alert(evt.target.responseText);

      }

      function uploadFailed(evt) {

        alert("There was an error attempting to upload the file.");

      }

      function uploadCanceled(evt) {

        alert("The upload has been canceled by the user or the browser dropped the connection.");

      }

    </script>

</head>

<body>

  <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">

    <div class="row">

      <label for="fileToUpload">Select a File to Upload</label><br />

      <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>

    </div>

    <div id="fileName"></div>

    <div id="fileSize"></div>

    <div id="fileType"></div>

    <div class="row">

      <input type="button" onclick="uploadFile()" value="Upload" />

    </div>

    <div id="progressNumber"></div>

  </form>

</body>

</html>

初识html5 File API实现带有进度提示的文件上传的更多相关文章

  1. Ajax实现带进度条的文件上传

    Ajax实现带进度条的文件上传 文件上传页面运行效果 上传文件并显示进度条运行效果 代码如下; DiskFileItemFactory factory = new DiskFileItemFactor ...

  2. HTML5——摒弃插件和前端框架的异步文件上传

    之前我从来没有体会到HTML5的便利,直到这次需要一个异步上传的功能功能.一开始我以为文件的一些声明必须为HTML5才管用,后来才知道添加了很多以前没有的标签,并可以直接播放视频,音频等.可以不再使用 ...

  3. Ajax技术——带进度条的文件上传

    1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运 ...

  4. HTML5利用FormData对象实现显示进度条的文件上传

    摘自:https://blog.csdn.net/q1056843325/article/details/53759963 自己做是按这个实现的,兼容性还不错 完整简约的解决方案 下面的代码清单是包括 ...

  5. 采用formdata做跨域的、无刷新、带进度条的文件上传

    以前做无刷新上传,都要用iframe,如果想有进度条,就千难万难,不得不用flash等插件来实现. 现在HTML5终于普及了,筒子们不用再那么痛苦了. 所有这一切都变得异常简单!! 不信?且看如下代码 ...

  6. Android带进度条的文件上传，使用AsyncTask异步任务

    最近项目中要做一个带进度条的上传文件的功能,学习了AsyncTask,使用起来比较方便,将几个方法实现就行,另外做了一个很简单的demo,希望能对大家有帮助,在程序中设好文件路径和服务器IP即可. A ...

  7. file中mkdirs和mkdir的区别-文件上传

    mkdirs()可以建立多级文件夹, mkdir()只会建立一级的文件夹, 如下: new File("/tmp/one/two/three").mkdirs(); 执行后, 会建 ...

  8. MVC5：使用Ajax和HTML5实现文件上传功能

    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...

  9. springMVC+ajax 文件上传 带进度条

    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

随机推荐

  1. Android Builder模式在开发中的应用

    最近在学习图片加载框架Glide的时候,被他精简的写法震惊了.一句话,就可以搞定. Glide.with(mContext) .load(url) .centerCrop() .placeholder ...

  2. Android 视频播放器，在线播放

    1. Bilibili https://github.com/Bilibili/ijkplayer 1.测试的时候总是崩溃,不知道是我不会用还是怎么回事. 2016-04-15 2.AndroidVi ...

  3. JavaSE 和 JavaEE 的关系

    1.javaSe看成是java基础   (Standard Edition(标准版) ) 2.J2EE看成是应用            (Enterprise Edition(企业版)) 3.java ...

  4. 我的android学习经历7

    android签名后报错的问题 Duplicate id @+id/imageView, already defined earlier in this layout,android生成报错 这个是项 ...

  5. HttpClient 教程 (A)

    前言 超文本传输协议(HTTP)也许是当今互联网上使用的最重要的协议了.Web服务,有网络功能的设备和网络计算的发展,都持续扩展了HTTP协议的角色,超越了用户使用的Web浏览器范畴,同时,也增加了需 ...

  6. ORACLE TO_CHAR函数格式化数字的出现空格的原因

    在这篇博客SQL挑战--如何高效生成编码里面我由于需要将数字格式化为字符,像12需要格式化0012这样的字符,所以使用了TO_CHAR(数字,'0000')这样的写法,后面0000表示缺省补零,测试过 ...

  7. PHP curl https访问问题

    PHP curl https访问问题,原代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 /* @String url URL地址  * @Array data P ...

  8. MySQL 优化之 Linux系统层面调优

    MySQL 一般运行于Linux系统中.对于MySQL的调优一般分为Linux操作系统层面的调优和MySQL层面的调优(当然还有架构层面.业务层面.应用程序层面的调优).操作系统主要是管理和分配硬件资 ...

  9. iOS Build Active Architecture Only 属性的理解（及 not found for architecture i386 的解决方案）

    最近做项目过程遇到一个问题: 涉及到这个属性:Build Active Architecture Only Yes .No的区别: 设置为yes,是只编译当前的architecture版本,是为了编译 ...

  10. hash查找

    这里使用了编号代替真实的数据,只用来表示算法 #ifndef HASH_DATA_T #define HASH_DATA_T int #endif //HASH_DATA_T typedef stru ...