jQuery上傳多張圖片帶進度條樣式（DEMO）
更新時間：2017年03月02日 10:05:15 作者：duan199404
這篇文章主要介紹了jQuery上傳多張圖片帶進度條樣式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
下面一段代碼給大家分享jquery上傳多種圖片帶進度條樣式，具體代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>xhr2</title>
</head>
<body>
<div style="text-align: center; margin: 100px">
<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);
//新建一個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è)置超時時間
xhr.timeout = 100000;
xhr.ontimeout = function(event) {
alert('請求超時！');
}
}
</script>
</body>
</html>
以上所述是小編給大家介紹的關(guān)于jQuery上傳多張圖片帶進度條樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本文主要介紹了預(yù)加載顯示圖片藝術(shù)實現(xiàn)的方法--一個jquery庫的preLoadImages()函數(shù)，使用這個函數(shù)就可以輕松實現(xiàn)圖片預(yù)加載了。需要的朋友可以看下2016-12-12
JQuery 在文檔中查找指定name的元素并移除的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫Query 在文檔中查找指定name的元素并移除的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
formValidator3.3的ajaxValidator一些異常分析
ajaxvalidator是大家問的最多的問題，修正一個bug（感謝網(wǎng)友“じ龍峸√”），并把大家最關(guān)心的問題，再做一次闡述。2011-07-07
調(diào)用HttpHanlder的幾種返回方式小結(jié)
本篇文章主要是對調(diào)用HttpHanlder的幾種返回方式進行了總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
輕量級jQuery插件slideBox實現(xiàn)帶底欄輪播(焦點圖)代碼
這篇文章主要介紹了輕量級jQuery插件slideBox實現(xiàn)帶底欄輪播(焦點圖)代碼，代碼簡單易懂，非常實用，特此分享腳本之家平臺供大家學(xué)習2016-03-03
這篇文章主要介紹了簡潔實用的BootStrap jQuery手風琴插件知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了JQuery 進入頁面默認給已賦值的復(fù)選框打鉤的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-03-03
這篇文章主要介紹了jQuery獲取樣式中顏色值的方法,可實現(xiàn)針對IE與Chrome、Firefox等不同瀏覽器都可獲取css樣式中background-color值的功能,非常具有實用價值,需要的朋友可以參考下2015-01-01
基于jQuery實現(xiàn)select下拉選擇可輸入附源碼下載
一般的select下拉框是不能輸入的，只能供大家選擇，今天小編給大家分享基于jQuery實現(xiàn)select下拉選擇可輸入附源碼下載，需要的朋友參考下2016-02-02
這篇文章主要介紹了jQuery點擊頁面其他部分隱藏下拉菜單功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11