jQuery上傳多張圖片帶進(jìn)度條樣式(DEMO)
下面一段代碼給大家分享jquery上傳多種圖片帶進(jìn)度條樣式,具體代碼如下所示:
<!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); //新建一個(gè)FormData對(duì)象 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ā)送請(qǐng)求 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('請(qǐng)求超時(shí)!'); } } </script> </body> </html>
以上所述是小編給大家介紹的關(guān)于jQuery上傳多張圖片帶進(jìn)度條樣式,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JQuery 在文檔中查找指定name的元素并移除的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JQuery 在文檔中查找指定name的元素并移除的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05formValidator3.3的ajaxValidator一些異常分析
ajaxvalidator是大家問(wèn)的最多的問(wèn)題,修正一個(gè)bug(感謝網(wǎng)友“じ龍峸√”),并把大家最關(guān)心的問(wèn)題,再做一次闡述。2011-07-07調(diào)用HttpHanlder的幾種返回方式小結(jié)
本篇文章主要是對(duì)調(diào)用HttpHanlder的幾種返回方式進(jìn)行了總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12輕量級(jí)jQuery插件slideBox實(shí)現(xiàn)帶底欄輪播(焦點(diǎn)圖)代碼
這篇文章主要介紹了輕量級(jí)jQuery插件slideBox實(shí)現(xiàn)帶底欄輪播(焦點(diǎn)圖)代碼,代碼簡(jiǎn)單易懂,非常實(shí)用,特此分享腳本之家平臺(tái)供大家學(xué)習(xí)2016-03-03簡(jiǎn)潔實(shí)用的BootStrap jQuery手風(fēng)琴插件
這篇文章主要介紹了簡(jiǎn)潔實(shí)用的BootStrap jQuery手風(fēng)琴插件知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08JQuery 進(jìn)入頁(yè)面默認(rèn)給已賦值的復(fù)選框打鉤
這篇文章主要介紹了JQuery 進(jìn)入頁(yè)面默認(rèn)給已賦值的復(fù)選框打鉤的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-03-03基于jQuery實(shí)現(xiàn)select下拉選擇可輸入附源碼下載
一般的select下拉框是不能輸入的,只能供大家選擇,今天小編給大家分享基于jQuery實(shí)現(xiàn)select下拉選擇可輸入附源碼下載,需要的朋友參考下2016-02-02jQuery點(diǎn)擊頁(yè)面其他部分隱藏下拉菜單功能
這篇文章主要介紹了jQuery點(diǎn)擊頁(yè)面其他部分隱藏下拉菜單功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11