溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下js如何實現文件上傳功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創建對象，也能使用現有的對象。
具體內容如下
<!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為服務器請求地址，true 該參數規定請求是否異步處理。
xhr.onload = uploadComplete; //請求完成
xhr.onerror = uploadFailed; //請求失敗
xhr.upload.onprogress = progressFunction;//【上傳進度調用方法實現】
xhr.upload.onloadstart = function(){//上傳開始執行方法
ot = new Date().getTime(); //設置上傳開始時間
oloaded = 0;//設置上傳開始時，以上傳的文件大小為0
};
xhr.send(form); //開始上傳，發送form數據
}
//上傳成功響應
function uploadComplete(evt) {
//服務斷接收完文件返回的結果
var data = JSON.parse(evt.target.responseText);
if(data.success) {
alert("上傳成功！");
}else{
alert("上傳失敗！");
}
}
//上傳失敗
function uploadFailed(evt) {
alert("上傳失敗！");
}
//取消上傳
function cancleUploadFile(){
xhr.abort();
}
//上傳進度實現方法，上傳過程中會頻繁調用該方法
function progressFunction(evt) {
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
// event.total是需要傳輸的總字節，event.loaded是已經傳輸的字節。如果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();//獲取當前時間
var pertime = (nt-ot)/1000; //計算出上次調用該方法時到現在的時間差，單位為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如何實現文件上傳功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
