zoukankan      html  css  js  c++  java
  • xmlhttprequest upload

    html5 带进度上传

    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", "test2.php");
            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 = 'unable to compute';
            }
          }
    
          function uploadComplete(evt) {
            /* This event is raised when the server send back a response */
            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.");
          }
  • 相关阅读:
    8-21模拟赛解题报告
    8-20模拟赛解题报告
    8-19模拟赛解题报告
    8-18模拟赛解题报告
    8-27复习(写题)报告
    [省赛训练(DP)]Course Selection System
    Trie(字典树)的基本操作与应用(一般与字符串前缀相关)
    [算法学习]欧拉筛
    构造函数运行的机制
    js基本数据类型之间的转换
  • 原文地址:https://www.cnblogs.com/dachie/p/3897749.html
Copyright © 2011-2022 走看看