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)文章
這篇文章主要介紹了jquery滾動加載數(shù)據(jù)的方法,實例分析了jQuery動態(tài)加載數(shù)據(jù)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jquery復(fù)選框多選賦值給文本框的方法,涉及jQuery相關(guān)選擇器的使用技巧,需要的朋友可以參考下2015-01-01
下面小編就為大家分享一篇利用JQUERY實現(xiàn)多個AJAX請求等待的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了jQuery的文檔處理程序,結(jié)合實例形式詳細分析了jQuery文檔處理程序的概念、原理、使用方法與相關(guān)注意事項,并詳細講述了文檔處理程序的優(yōu)勢,需要的朋友可以參考下2016-05-05
jQuery多級聯(lián)動下拉插件chained用法示例
這篇文章主要介紹了jQuery多級聯(lián)動下拉插件chained用法,結(jié)合實例形式分析了jQuery多級聯(lián)動下拉插件chained的功能與基本使用技巧,需要的朋友可以參考下2016-08-08
jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹
jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹，需要的朋友可以參考下2012-11-11
jQuery 翻頁組件yunm.pager.js實現(xiàn)div局部刷新的思路
翻頁插件有很多種，做出來的效果都非常棒，這篇文章主要介紹了jQuery 翻頁組件yunm.pager.js實現(xiàn)div局部刷新的思路，非常不錯,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jQuery實現(xiàn)簡單下拉導(dǎo)航效果,通過簡單的元素遍歷與樣式替換實現(xiàn)下拉導(dǎo)航的功能,非常具有實用價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jquery文檔操作wrap()方法,以實例形式簡單分析了wrap()方法用某個標簽將某個元素包起來的使用技巧,需要的朋友可以參考下2015-01-01
jquery 取子節(jié)點及當(dāng)前節(jié)點屬性值的方法
這篇文章主要介紹了jquery 取子節(jié)點及當(dāng)前節(jié)點屬性值的方法,比較適合新手，也比較實用，需要的朋友可以參考下2014-08-08