JS實(shí)現(xiàn)上傳文件顯示進(jìn)度條
本文實(shí)例為大家分享了JS實(shí)現(xiàn)上傳文件顯示進(jìn)度條的具體代碼,供大家參考,具體內(nèi)容如下
用戶(hù)反饋:圖片上傳過(guò)程中,如果網(wǎng)絡(luò)比較慢,會(huì)發(fā)現(xiàn)上傳圖片后沒(méi)有一點(diǎn)反應(yīng),體驗(yàn)性很差,圖片回顯也比較慢
解決思路:通過(guò)XMLHttpRequest的progress來(lái)實(shí)現(xiàn)監(jiān)聽(tīng)圖片上傳的進(jìn)度,實(shí)時(shí)顯示百分比,后臺(tái)保存圖片成功后再將圖片轉(zhuǎn)為Base64編碼的字符串在前端顯示出來(lái),這樣可以很大程度提高用戶(hù)體驗(yàn)
需要達(dá)到的效果:
1、用戶(hù)可以看到圖片上傳進(jìn)度條百分比
2、提升圖片回顯速度(將圖片轉(zhuǎn)為Base64編碼的字符串在前端顯示)
HTML代碼:
<!-- 上傳input --> <input class="file-input" name="uploadImage" id="uploadImage" type="file"> <!-- 上傳進(jìn)度條顯示 --> <a id="showProgress" style="display:none;" href="#"></a>?
JS代碼:
// 上傳input綁定一個(gè)change事件 $("#uploadImage").on("change", uploadPicture()); ? // 上傳方法,里面處理進(jìn)度條邏輯 function uploadPicture() { ? ? var $this= $(this); ? ? document.getElementById("showProgress").style.display="block"; ? ? var fd = new FormData(); ? ? fd.append("file", $this.context.files[0]); ? ? ? var xhr = new XMLHttpRequest(); ? ? //上傳中設(shè)置上傳的百分比 ? ? xhr.upload.addEventListener("progress", function(evt){ ? ? ? ? if (evt.lengthComputable) { ? ? ? ? ? ? var percentComplete = Math.round(evt.loaded * 100 / evt.total); ? ? ? ? ? ? if (percentComplete == 100){ ? ? ? ? ? ? ? ? setTimeout(function () { ? ? ? ? ? ? ? ? ? ? document.getElementById("showProgress").innerHTML = '已上傳'+percentComplete+"%"; ? ? ? ? ? ? ? ? },1500) ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? document.getElementById("showProgress").innerHTML = '已上傳'+percentComplete+"%"; ? ? ? ? ? ? } ? ? ? ? }else { ? ? ? ? ? ? document.getElementById("showProgress").innerHTML = '無(wú)法計(jì)算'; ? ? ? ? } ? ? }, false); ? ? //請(qǐng)求完成后執(zhí)行的操作 ? ? xhr.addEventListener("load", function(evt){ ? ? ? ? var message = evt.target.responseText, ? ? ? ? ? ? ? ? obj = eval("("+message+")"); ? ? ? ? $("#uploadImage").attr("src",obj); ? ? ? ? document.getElementById("showProgress").style.display="none"; ? ? ? ? ?alert("上傳成功!"); ? ? ? }, false); ? ? //請(qǐng)求error ? ? xhr.addEventListener("error", uploadFailed, false); ? ? //請(qǐng)求中斷 ? ? xhr.addEventListener("abort", uploadCanceled, false); ? ? //發(fā)送請(qǐng)求 ? ? xhr.open("POST", /uploadPicture.json); ? ? xhr.send(fd); ? ? } ? function uploadFailed(evt) { ? ?alert("上傳出錯(cuò)."); } ? function uploadCanceled(evt) { ? ?alert("上傳已由用戶(hù)或?yàn)g覽器取消刪除連接."); }
后臺(tái)代碼:
/** ? ? ?* 上傳圖片 ? ? ?* @param request ? ? ?* @return ? ? ?*/ ? ? @RequestMapping(value = "/uploadPicture", method = RequestMethod.POST) ? ? @ResponseBody ? ? public String uploadPicture(HttpServletRequest request) { ? ? ? ? MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; ? ? ? ? Iterator<String> iter = multipartRequest.getFileNames(); ? ? ? ? MultipartFile file = null; ? ? ? ? while (iter.hasNext()) { ? ? ? ? ? ? file = multipartRequest.getFile(iter.next()); ? ? ? ? } ? ? ? ? ? CommonsMultipartFile cFile = (CommonsMultipartFile) file; ? ? ? ? DiskFileItem fileItem = (DiskFileItem) cFile.getFileItem(); ? ? ? ? String filePath = ""; ? ? ? ? byte[] data = null; ? ? ? ? String originalFilename = file.getOriginalFilename(); ? ? ? ? try { ? ? ? ? ? ? String fileType = originalFilename.substring( ? ? ? ? ? ? ? ? ? ? originalFilename.lastIndexOf(".") + 1).toLowerCase(); ? ? ? ? ? ? ? float bb = bytes2kb(file.getSize()); ? ? ? ? ? ? ? if (bb > 10) { ? ? ? ? ? ? ? ? throw new Exception("文件上傳失敗,最大上傳大小為10M。"); ? ? ? ? ? ? } ? ? ? ? ? ? ? filePath = 上傳圖片方法,這里改為自己公司的; ? ? ? ? ? ?? ? ? ? ? ? ? // 轉(zhuǎn)為輸入流 ? ? ? ? ? ? InputStream inputStream = fileItem.getInputStream(); ? ? ? ? ? ? data = new byte[inputStream.available()]; ? ? ? ? ? ? inputStream.read(data); ? ? ? ? ? ? inputStream.close(); ? ? ? ? ? ? // 對(duì)字節(jié)數(shù)組進(jìn)行Base64編碼,得到Base64編碼的字符串 ? ? ? ? ? ? BASE64Encoder encoder = new BASE64Encoder(); ? ? ? ? ? ? String base64Str = encoder.encode(data); ? ? ? ? ? ? return "data:image/jpeg;base64,"+base64Str; ? ? ? ? } catch (Exception e) { ? ? ? ? ? ? e.printStackTrace(); ? ? ? ? } ? ? ? ? ? return null; ? ? } ? public static float bytes2kb(long bytes) { ?? ??? ?BigDecimal filesize = new BigDecimal(bytes); ?? ??? ?BigDecimal megabyte = new BigDecimal(1024 * 1024); ?? ??? ?float returnValue = filesize.divide(megabyte, 2, 0) ?? ??? ??? ??? ?.floatValue(); ? ?? ??? ?return returnValue; ?? ?}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS實(shí)現(xiàn)批量上傳文件并顯示進(jìn)度功能
- JS插件plupload.js實(shí)現(xiàn)多圖上傳并顯示進(jìn)度條
- js實(shí)現(xiàn)帶進(jìn)度條提示的多視頻上傳功能
- JS+html5實(shí)現(xiàn)異步上傳圖片顯示上傳文件進(jìn)度條功能示例
- 基于JS實(shí)現(xiàn)視頻上傳顯示進(jìn)度條
- 原生javascript上傳圖片帶進(jìn)度條【實(shí)例分享】
- 教你3分鐘利用原生js實(shí)現(xiàn)有進(jìn)度監(jiān)聽(tīng)的文件上傳預(yù)覽組件
- Node.js上傳文件功能之服務(wù)端如何獲取文件上傳進(jìn)度
- JavaScript實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度
- Nodejs文件上傳、監(jiān)聽(tīng)上傳進(jìn)度的代碼
- JavaScript獲取上傳進(jìn)度的幾種方式實(shí)現(xiàn)
相關(guān)文章
js?實(shí)現(xiàn)picker?選擇器示例詳解
這篇文章主要為大家介紹了js?實(shí)現(xiàn)picker?選擇器示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10利用js實(shí)現(xiàn)選項(xiàng)卡的特別效果的實(shí)例
利用js實(shí)現(xiàn)選項(xiàng)卡的特別效果的實(shí)例,需要的朋友可以參考一下2013-03-03JavaScript代碼模擬鼠標(biāo)自動(dòng)點(diǎn)擊事件示例
這篇文章主要介紹了JavaScript代碼模擬鼠標(biāo)自動(dòng)點(diǎn)擊事件示例,文章通過(guò)示例代碼和運(yùn)行效果圖介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08javascript面向?qū)ο笕筇卣髦庋b實(shí)例詳解
這篇文章主要介紹了javascript面向?qū)ο笕筇卣髦庋b,簡(jiǎn)單描述了封裝的基本概念、原理,并結(jié)合實(shí)例形式詳細(xì)分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中封裝的用法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07關(guān)于better-scroll插件的無(wú)法滑動(dòng)bug(2021通過(guò)插件解決)
這篇文章主要介紹了關(guān)于better-scroll插件的無(wú)法滑動(dòng)bug(2021通過(guò)插件解決),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03詳解JavaScript如何創(chuàng)建一個(gè)非自動(dòng)播放的GIF網(wǎng)絡(luò)組件
這篇文章主要為大家介紹了如何利用JavaScript創(chuàng)建一個(gè)允許您的用戶(hù)決定是否要播放gif的Web組件,文中的實(shí)現(xiàn)步驟講解詳細(xì),需要的可以參考一下2022-02-02