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. 【即时通讯】即时通讯及XMPP概述及…

    在讲解XMPP前,我们需要先了解什么是即时通讯技术: * 即时通讯技术(IM - InstantMessaging)支持用户在线实时交谈.当一方需要发送消息时,用户必须打开一个窗口,以便让用户与交流对 ...

  2. 更新CocoaPods碰到的问题及知识点

    1:解决CocoaPods安装时报的问题,http://ruby.taobao.org/latest_specs.4.8.gz 报404 解决 bad response Not Found 404 ( ...

  3. WCF学习资料汇总

    微软官方讲解教程: 跟我一起从零开始学WCF系列课程 http://msdnwebcast.net/webcast/1/2692/ 构建WCF面向服务的应用程序系列课程 http://msdnwebc ...

  4. 关于JS变量提升的一些坑

    function log(str) { // 本篇文章所有的打印都将调用此方法 console.log(str); } 函数声明和变量声明总是会被解释器悄悄地被“提升”到方法体的最顶部 变量声明.命名 ...

  5. Android中的单例模式

    定义: 单例模式:确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 使用场景: 确保某一个类有且只有一个对象的场景,避免产生多个对象消耗过多的资源,或者某种类型的对象只应该有且只有一 ...

  6. ES6箭头函数（Arrow Functions）

    ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 1. 具有一个参数的简单函数 var single = a => a single('he ...

  7. WD硬盘型号信息

    买硬盘的时候有时候分不清 既然找到了就发上来吧

  8. STM32的USART

    转载自:http://www.cnblogs.com/TrueElement/archive/2012/09/14/2684298.html 几个问题: 1.状态寄存器(USART_SR)中的TC(T ...

  9. [引] Security tips for web developers

    Source :Security tips for web developers

  10. TeX Live安装配置等默认目录

    TeX Live默认目录情况:   TEXDIR (the main TeX directory):     !! default location: /usr/local/texlive/2015  ...