php使用html5 XHR2如何實(shí)現(xiàn)上傳文件與進(jìn)度顯示功能

發(fā)布時(shí)間：2021-05-18 14:46:48 來(lái)源：億速云閱讀：147 作者：小新欄目：開發(fā)技術(shù)

這篇文章給大家分享的是有關(guān)php使用html5 XHR2如何實(shí)現(xiàn)上傳文件與進(jìn)度顯示功能的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

具體如下：

思路：只要我們知道上傳文件的總大小，還有上傳過(guò)程中上傳文件的大小，那么就可以實(shí)現(xiàn)進(jìn)度顯示了。

在html5中，XMLHttpRequest對(duì)象，傳送數(shù)據(jù)的時(shí)候，progress事件用來(lái)返回進(jìn)度信息。

它分成上傳和下載兩種情況

1.下載的progress事件屬于XMLHttpRequest對(duì)象
2.上傳的progress事件屬于XMLHttpRequest.upload對(duì)象。

與progress事件相關(guān)的，還有其他五個(gè)事件：

1.load事件：傳輸成功完成。
2.abort事件：傳輸被用戶取消。
3.error事件：傳輸中出現(xiàn)錯(cuò)誤。
4.loadstart事件：傳輸開始。
5.loadEnd事件：傳輸結(jié)束，但是不知道成功還是失敗。

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form method="post" id="myForm">
    <input type="file" name="file" id="upfile" />
    <input type="submit" name="submit" value="提交" />
  </form>
  <div id="upStatus"></div>
</body>
<script type="text/javascript">
  var myForm = document.getElementById("myForm");
  var upfile = document.getElementById("upfile");

  myForm.onsubmit = function() {
    //我們創(chuàng)建一個(gè)FormData對(duì)象
    var fd = new FormData();
    var file = upfile.files[0];
    //把文件添加到FormData對(duì)象中
    fd.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        alert(this.responseText);
      }
    };
    xhr.open("post", "upfile.php", true);

    //監(jiān)聽上傳事件
    xhr.upload.onprogress = function(ev) {
      //如果長(zhǎng)度是可計(jì)算的
      if(ev.lengthComputable) {
        var percent = Math.round((ev.loaded / ev.total) * 100);
        document.getElementById("upStatus").innerHTML = percent + "%";
      }
    };

    //發(fā)送FormData對(duì)象
    xhr.send(fd);
    return false;
  };
</script>
</html>

upfile.php代碼如下：

<?php
$uploadDir = './upload/';
if(!file_exists($uploadDir)) {
  @mkdir($uploadDir, 0777, true);
}
$uploadFile = $uploadDir . basename($_FILES['file']['name']);
if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
  echo "OK";
} else {
  echo "NO";
}

如果上傳過(guò)程中PHP出現(xiàn)如下信息：

Warning: POST Content-Length of 625523488 bytes exceeds the limit of 8388608 bytes in Unknown on line 0

說(shuō)明文件大小超出了PHP設(shè)置限制，可以設(shè)置php.ini

;腳本解析輸入數(shù)據(jù)(類似 POST 和 GET)允許的最大時(shí)間，單位是秒。

;它從接收所有數(shù)據(jù)到開始執(zhí)行腳本進(jìn)行測(cè)量的。
max_input_time = 60

;允許客戶端單個(gè)POST請(qǐng)求發(fā)送的最大數(shù)據(jù)
post_max_size = 64M

;是否開啟文件上傳功能
file_uploads = On

;文件上傳的臨時(shí)存放目錄(如果不指定，使用系統(tǒng)默認(rèn)的臨時(shí)目錄)
;upload_tmp_dir =

;允許單個(gè)請(qǐng)求上傳的最大文件大小
upload_max_filesize = 64M

;允許單個(gè)POST請(qǐng)求同時(shí)上傳的最大文件數(shù)量
max_file_uploads = 20

PHP開發(fā)環(huán)境搭建工具有哪些

一、phpStudy，是一個(gè)新手入門最常用的開發(fā)環(huán)境。二、WampServer，WampServer也同樣的也是和phpStudy一樣操作簡(jiǎn)單對(duì)小白比較友好。三、XAMPP，XAMPP（Apache+MySQL+PHP+PERL）是一個(gè)功能強(qiáng)大的建站集成軟件包；四、MAMP，MAMP分為兩種MAMP和MAMP Pro for Mac。五、寶塔面板，寶塔面板是一款服務(wù)器管理軟件，支持windows和linux系統(tǒng)。六、UPUPW，UPUPW是目前Windows平臺(tái)下最具特色的Web服務(wù)器PHP套件。

感謝各位的閱讀！關(guān)于“php使用html5 XHR2如何實(shí)現(xiàn)上傳文件與進(jìn)度顯示功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

php使用html5 XHR2如何實(shí)現(xiàn)上傳文件與進(jìn)度顯示功能

PHP開發(fā)環(huán)境搭建工具有哪些

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽