zoukankan      html  css  js  c++  java

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

    摘自：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毫秒获取从而更加精细 
  • 相关阅读:
    团队冲刺03
    梦断代码 阅读笔记02
    团队冲刺02
    团队冲刺01
    周总结
    团队工作任务
    阅读笔记3
    梦断代码阅读笔记01
    周总结
    NABCD项目分析
  • 原文地址：https://www.cnblogs.com/lichuntian/p/9799701.html
Copyright © 2011-2022 走看看