html5 进度条上传文件

来源：互联网发布：情侣知乎编辑：程序博客网时间：2024/06/05 09:07

<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", "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.");        }      </script>  </head>  <body>  <form id="form1" enctype="multipart/form-data" method="post" action="upload.php">  <div class="row">        <label for="fileToUpload">Select a File to Upload</label>  <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>

<?PHP       //error_reporting(E_ALL);      header("content=text/html; charset=utf-8");      $uf = $_FILES['fileToUpload'];      if(!$uf){          echo "no fileToUpload index";          exit();      }      $upload_file_temp = $uf['tmp_name'];        $upload_file_name = $uf['name'];               if(!$upload_file_temp){          echo "上传失败";          exit();      }      $file_size_max = 1024*1024;// 1M限制文件上传最大容量(bytes)        // 检查文件大小        if ($upload_file_size > $file_size_max) {            echo "对不起，你的文件容量超出允许范围：".$file_size_max;            exit();        }        $store_dir = "./upload/";// 上传文件的储存位置        $accept_overwrite = 0;//是否允许覆盖相同文件        $file_path = $store_dir . $upload_file_name;       // 检查读写文件        if (file_exists($file_path) && !$accept_overwrite) {            echo "存在相同文件名的文件";            exit();        }               //复制文件到指定目录        if (!move_uploaded_file($upload_file_temp,$file_path)) {            echo "复制文件失败".$upload_file_temp." to ". $file_path;            exit;        }               Echo "<p>你上传了文件:";        echo $upload_file_name;        echo "<br>";        //客户端机器文件的原名称。                Echo "文件的 MIME 类型为:";        echo $uf['type'];        //文件的 MIME 类型，需要浏览器提供该信息的支持，例如“image/gif”。         echo "<br>";               Echo "上传文件大小:";        echo $uf['size'];        //已上传文件的大小，单位为字节。         echo "<br>";               Echo "文件上传后被临时储存为:";        echo $uf['tmp_name'];        //文件被上传后在服务端储存的临时文件名。         echo "<br>";                    $error = $uf['error'];        switch($error){        case 0:            Echo "上传成功"; break;        case 1:            Echo "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值."; break;        case 2:            Echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值。";break;        case 3:            Echo "文件只有部分被上传";break;        case 4:            Echo "没有文件被上传";break;        }    ?>

转载：：如侵权：联系删除

0 0