jQuery如何上傳多張圖片帶進(jìn)度條樣式

發(fā)布時(shí)間：2021-06-30 15:04:21 來源：億速云閱讀：99 作者：小新欄目：web開發(fā)

這篇文章主要介紹了jQuery如何上傳多張圖片帶進(jìn)度條樣式，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體代碼如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>xhr2</title>
</head>
<body>
<div >
<input type="file" id="file" name="file" multiple="multiple">
<progress id="uploadprogress" min="0" max="100" value="0">0</progress>
<button onclick="xhr2()">OK</button>
</div>
<script>
function xhr2() {
var xhr = new XMLHttpRequest();//第一步
//定義表單變量
var file = document.getElementById('file').files;
//console.log(file.length);
//新建一個(gè)FormData對象
var formData = new FormData(); //++++++++++
formData.append("enctype","multipart/form-data");
//追加文件數(shù)據(jù)
for (i = 0; i < file.length; i++) {
formData.append("file[" + i + "]", file[i]); //++++++++++
}
//formData.append("file", file[0]); //++++++++++
//post方式
xhr.open('POST', '/common/doUpload'); //第二步驟
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var complete = (event.loaded / event.total * 100 | 0);
var progress = document.getElementById('uploadprogress');
progress.value = progress.innerHTML = complete;
}
};
//發(fā)送請求
xhr.send(formData); //第三步驟
//ajax返回
xhr.onreadystatechange = function() { //第四步
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
//設(shè)置超時(shí)時(shí)間
xhr.timeout = 100000;
xhr.ontimeout = function(event) {
alert('請求超時(shí)！');
}
}
</script>
</body>
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jQuery如何上傳多張圖片帶進(jìn)度條樣式”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

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

jQuery如何上傳多張圖片帶進(jìn)度條樣式

猜你喜歡

最新資訊

相關(guān)推薦

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