摘自：https://blog.csdn.net/q1056843325/article/details/53759963

自己做是按这个实现的，兼容性还不错

完整简约的解决方案

下面的代码清单是包括能够支持的最小文件与进度指示器上传所需的JavaScript和HTML整个页面 
我尽量保证它的简洁 
所以如果你想要使用自己的布局和显示信息可以借此扩展 
HTML5还引入了progress标签用于显示进度 
progress元素有max和value属性，因此使用它可以更方便的显示进度 
但是，在写这篇文章的时候，只有Chrome6支持这个元素 
所以我在这个简约的解决方案没有使用它

更改服务器端脚本的URL 
请务必将URL更改为指向你上传文件的服务器端URL 
在下面的代码清单中 
UploadMinimal.aspx的uploadFile()方法： 
xhr.open("POST", "UploadMinimal.aspx");

<!DOCTYPE html>

<html>

<head>

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

    <script type="text/javascript">

      function fileSelected() {

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

        if (file) {

          var fileSize = 0;

          if (file.size > 1024 * 1024)

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

          else

            fileSize = (Math.round(file.size * 100 / 1024) / 100).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[0]);

        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", "UploadMinimal.aspx");

        xhr.send(fd);

      }

      function uploadProgress(evt) {

        if (evt.lengthComputable) {

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

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

        }

        else {

          document.getElementById('progressNumber').innerHTML = '无法计算';

        }

      }

      function uploadComplete(evt) {

        /* 当服务器响应后，这个事件就会被触发 */

        alert(evt.target.responseText);

      }

      function uploadFailed(evt) {

        alert("上传文件发生了错误尝试");

      }

      function uploadCanceled(evt) {

        alert("上传被用户取消或者浏览器断开连接");

      }

    </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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73

【代码6：完整简约的代码清单】

嗯，这是几乎涵盖了所有新版HTML5功能的简约版本 
在图片2中大家也看到了，获取其他信息需要数学知识 
这是相当多的额外的工作，不仅仅获得这些信息需要用到数学，显示和动画等等也要用 
例如获取上传的速率（上传速度） 
我做了以下几点：

  1. 在uploadProgress(evt)事件中，存储evt.loaded和evt.total作为全局变量
  2. 创建了一个每秒触发的计时器事件
  3. 在定时器的回调中，获取了传输字节的差值（与1s之前的差）
  4. 每秒上传字节数得到上传速度

在这里，我还设置了定时器每500毫秒获取从而更加精细

<!DOCTYPE html>

<html>

<head>

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

    <script type="text/javascript">

      function fileSelected() {

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

        if (file) {

          var fileSize = 0;

          if (file.size > 1024 * 1024)

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

          else

            fileSize = (Math.round(file.size * 100 / 1024) / 100).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[0]);

        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", "UploadMinimal.aspx");

        xhr.send(fd);

      }

      function uploadProgress(evt) {

        if (evt.lengthComputable) {

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

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

        }

        else {

          document.getElementById('progressNumber').innerHTML = '无法计算';

        }

      }

      function uploadComplete(evt) {

        /* 当服务器响应后，这个事件就会被触发 */

        alert(evt.target.responseText);

      }

      function uploadFailed(evt) {

        alert("上传文件发生了错误尝试");

      }

      function uploadCanceled(evt) {

        alert("上传被用户取消或者浏览器断开连接");

      }

    </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功能的简约版本 
在图片2中大家也看到了，获取其他信息需要数学知识 
这是相当多的额外的工作，不仅仅获得这些信息需要用到数学，显示和动画等等也要用 
例如获取上传的速率（上传速度） 
我做了以下几点：

  1. 在uploadProgress(evt)事件中，存储evt.loaded和evt.total作为全局变量
  2. 创建了一个每秒触发的计时器事件
  3. 在定时器的回调中，获取了传输字节的差值（与1s之前的差）
  4. 每秒上传字节数得到上传速度

在这里，我还设置了定时器每500毫秒获取从而更加精细

完整简约的解决方案

下面的代码清单是包括能够支持的最小文件与进度指示器上传所需的JavaScript和HTML整个页面 
我尽量保证它的简洁 
所以如果你想要使用自己的布局和显示信息可以借此扩展 
HTML5还引入了progress标签用于显示进度 
progress元素有max和value属性，因此使用它可以更方便的显示进度 
但是，在写这篇文章的时候，只有Chrome6支持这个元素 
所以我在这个简约的解决方案没有使用它

更改服务器端脚本的URL 
请务必将URL更改为指向你上传文件的服务器端URL 
在下面的代码清单中 
UploadMinimal.aspx的uploadFile()方法： 
xhr.open("POST", "UploadMinimal.aspx");

<!DOCTYPE html>

<html>

<head>

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

    <script type="text/javascript">

      function fileSelected() {

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

        if (file) {

          var fileSize = 0;

          if (file.size > 1024 * 1024)

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

          else

            fileSize = (Math.round(file.size * 100 / 1024) / 100).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[0]);

        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", "UploadMinimal.aspx");

        xhr.send(fd);

      }

      function uploadProgress(evt) {

        if (evt.lengthComputable) {

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

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

        }

        else {

          document.getElementById('progressNumber').innerHTML = '无法计算';

        }

      }

      function uploadComplete(evt) {

        /* 当服务器响应后，这个事件就会被触发 */

        alert(evt.target.responseText);

      }

      function uploadFailed(evt) {

        alert("上传文件发生了错误尝试");

      }

      function uploadCanceled(evt) {

        alert("上传被用户取消或者浏览器断开连接");

      }

    </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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73

【代码6：完整简约的代码清单】

嗯，这是几乎涵盖了所有新版HTML5功能的简约版本 
在图片2中大家也看到了，获取其他信息需要数学知识 
这是相当多的额外的工作，不仅仅获得这些信息需要用到数学，显示和动画等等也要用 
例如获取上传的速率（上传速度） 
我做了以下几点：

  1. 在uploadProgress(evt)事件中，存储evt.loaded和evt.total作为全局变量
  2. 创建了一个每秒触发的计时器事件
  3. 在定时器的回调中，获取了传输字节的差值（与1s之前的差）
  4. 每秒上传字节数得到上传速度

在这里，我还设置了定时器每500毫秒获取从而更加精细

HTML5利用FormData对象实现显示进度条的文件上传的更多相关文章

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

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

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

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

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

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

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

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

  5. 利用windows系统ftp命令编写的BAT文件上传[转]

    利用windows系统ftp命令编写的BAT文件上传[转] 利用windows系统ftp命令编写的BAT文件上传[转] 在开发中往往需要将本地的程序上传到服务器,而且用惯了linux命令的人来说.在w ...

  6. 初识html5 File API实现带有进度提示的文件上传

    Html5终于解决了上传文件的同时显示文件上传进度的老问题.现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipar ...

  7. H5 FormData对象的使用——进行Ajax请求并上传文件

    XMLHttpRequest Level2 添加了一个新的接口——FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...

  8. FormData可实现异步传输二进制文件(即异步文件上传)

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.它能使现在的AJAX交互更加简单.之前的AJAX在上传前,需要将表单的数据序列化.与普通的 Ajax 相比,使用 ...

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

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

随机推荐

  1. MySQL-left join _20160928

    left join 左连接 返回from 后面表的全部记录和 left join 后面表和from 后面表条件相符的全部记录 一般格式为下面,首先table A 和tableB都有两个唯一的字段标识I ...

  2. bzoj 3522: Hotel dfs

    题目大意 在无边权树上求三个点,使两两点的距离等.求方案数\((n\leq 5000)\) 题解 我们知道三个点在树上的关系只有两种 三点共链 三点不共连 (这不是废话吗) 我们发现三点共链肯定不满足 ...

  3. 关于Socket 多线程 的一篇好文章

    http://www.kegel.com/c10k.html#topIt's time for web servers to handle ten thousand clients simultane ...

  4. Nuget-QRCode：QRCoder

    ylbtech-Nuget-QRCode:QRCoder 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https://github.com/codebu ...

  5. UnrealScript常用函数汇总

    转自:http://www.unrealchina.org/forum.php?mod=viewthread&tid=672&extra=page%3D1 foreach [用来遍历游 ...

  6. JAVA基础知识 String s = new String("ABC") VS String s = "abc"

    一:   String s = new String("ABC")  VS  String  s = "abc" String  s = "abc&q ...

  7. NancyFX 第二章 Rest框架

    正如你看到的,Nancy有两个主要用途. 其中第一项是作为一种通用的基于 REST 框架,可替代 ASP.NET Web API 或其他Rest工具包. 默认情况下,Nancy提供一流的路由和内容协商 ...

  8. 关于REST的一些想法

    REST and RESTful 最近入手了REST,谈谈自己的体会. 所谓REST, 我觉得是一种网址的设计风格.过去我们用Struts 或Spring MVC 时从来没有考虑过URL的设计风格.所 ...

  9. Django 框架

    MVC 框架和MTV框架  (了解即可) MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控 ...

  10. UVaLive 4731 Cellular Network (期望DP)

    题意:手机在蜂窝网络中的定位是一个基本问题,假设蜂窝网络已经得知手机处于c1,c2,,,cn这些区域中的一个,最简单的方法是同时在这些区域中寻找手机, 但这样做很浪费带宽,由于蜂窝网络中可以得知手机在 ...