溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js如何實現(xiàn)文件上傳功能

發(fā)布時間：2021-04-20 10:32:08 來源：億速云 閱讀：1509 作者：小新 欄目：web開發(fā)

小編給大家分享一下js如何實現(xiàn)文件上傳功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

js有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。

具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>XMLHttpRequest上傳文件</title>
  <script type="text/javascript">
    //圖片上傳
    var xhr;
    //上傳文件方法
    function UpladFile() {
      var fileObj = document.getElementById("file").files[0]; // js 獲取文件對象
      var url = "http://localhost:8080" + "/api/attachment/upload"; // 接收上傳文件的后臺地址
 
      var form = new FormData(); // FormData 對象
      form.append("file", fileObj); // 文件對象
 
      xhr = new XMLHttpRequest(); // XMLHttpRequest 對象
      xhr.open("post", url, true); //post方式，url為服務(wù)器請求地址，true 該參數(shù)規(guī)定請求是否異步處理。
      xhr.onload = uploadComplete; //請求完成
      xhr.onerror = uploadFailed; //請求失敗
 
      xhr.upload.onprogress = progressFunction;//【上傳進度調(diào)用方法實現(xiàn)】
      xhr.upload.onloadstart = function(){//上傳開始執(zhí)行方法
        ot = new Date().getTime();  //設(shè)置上傳開始時間
        oloaded = 0;//設(shè)置上傳開始時，以上傳的文件大小為0
      };
 
      xhr.send(form); //開始上傳，發(fā)送form數(shù)據(jù)
    }
 
    //上傳成功響應(yīng)
    function uploadComplete(evt) {
      //服務(wù)斷接收完文件返回的結(jié)果
 
      var data = JSON.parse(evt.target.responseText);
      if(data.success) {
        alert("上傳成功！");
      }else{
        alert("上傳失敗！");
      }
 
    }
    //上傳失敗
    function uploadFailed(evt) {
      alert("上傳失敗！");
    }
    //取消上傳
    function cancleUploadFile(){
      xhr.abort();
    }
 
 
    //上傳進度實現(xiàn)方法，上傳過程中會頻繁調(diào)用該方法
    function progressFunction(evt) {
      var progressBar = document.getElementById("progressBar");
      var percentageDiv = document.getElementById("percentage");
      // event.total是需要傳輸?shù)目傋止?jié)，event.loaded是已經(jīng)傳輸?shù)淖止?jié)。如果event.lengthComputable不為真，則event.total等于0
      if (evt.lengthComputable) {//
        progressBar.max = evt.total;
        progressBar.value = evt.loaded;
        percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
      }
      var time = document.getElementById("time");
      var nt = new Date().getTime();//獲取當(dāng)前時間
      var pertime = (nt-ot)/1000; //計算出上次調(diào)用該方法時到現(xiàn)在的時間差，單位為s
      ot = new Date().getTime(); //重新賦值時間，用于下次計算
      var perload = evt.loaded - oloaded; //計算該分段上傳的文件大小，單位b
      oloaded = evt.loaded;//重新賦值已上傳文件大小，用以下次計算
      //上傳速度計算
      var speed = perload/pertime;//單位b/s
      var bspeed = speed;
      var units = 'b/s';//單位名稱
      if(speed/1024>1){
        speed = speed/1024;
        units = 'k/s';
      }
      if(speed/1024>1){
        speed = speed/1024;
        units = 'M/s';
      }
      speed = speed.toFixed(1);
      //剩余時間
      var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
      time.innerHTML = '，速度：'+speed+units+'，剩余時間：'+resttime+'s';
      if(bspeed==0) time.innerHTML = '上傳已取消';
    }
  </script>
</head>
<body>
<progress id="progressBar" value="0" max="100" ></progress>
<span id="percentage"></span><span id="time"></span>
<br /><br />
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上傳" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
</body>
</html>

以上是“js如何實現(xiàn)文件上傳功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手