JS實現上傳文件顯示進度條

更新時間：2022年07月15日 08:34:39 作者：酷愛編程的小猿同學

這篇文章主要為大家詳細介紹了JS實現上傳文件顯示進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現上傳文件顯示進度條的具體代碼，供大家參考，具體內容如下

用戶反饋：圖片上傳過程中，如果網絡比較慢，會發(fā)現上傳圖片后沒有一點反應，體驗性很差，圖片回顯也比較慢

解決思路：通過XMLHttpRequest的progress來實現監(jiān)聽圖片上傳的進度，實時顯示百分比，后臺保存圖片成功后再將圖片轉為Base64編碼的字符串在前端顯示出來，這樣可以很大程度提高用戶體驗

需要達到的效果：

1、用戶可以看到圖片上傳進度條百分比

2、提升圖片回顯速度（將圖片轉為Base64編碼的字符串在前端顯示）

HTML代碼:

<!-- 上傳input -->
<input class="file-input" name="uploadImage" id="uploadImage" type="file">
<!-- 上傳進度條顯示 -->
<a id="showProgress" style="display:none;" href="#"></a>?

JS代碼：

// 上傳input綁定一個change事件
$("#uploadImage").on("change", uploadPicture());
?
// 上傳方法，里面處理進度條邏輯
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();
? ? //上傳中設置上傳的百分比
? ? 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 = '無法計算';
? ? ? ? }
? ? }, false);
? ? //請求完成后執(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);
? ? //請求error
? ? xhr.addEventListener("error", uploadFailed, false);
? ? //請求中斷
? ? xhr.addEventListener("abort", uploadCanceled, false);
? ? //發(fā)送請求
? ? xhr.open("POST", /uploadPicture.json);
? ? xhr.send(fd);
? ? }
?
function uploadFailed(evt) {
? ?alert("上傳出錯.");
}
?
function uploadCanceled(evt) {
? ?alert("上傳已由用戶或瀏覽器取消刪除連接.");
}

后臺代碼：

/**
? ? ?* 上傳圖片
? ? ?* @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 = 上傳圖片方法，這里改為自己公司的;
? ? ? ? ? ??
? ? ? ? ? ? // 轉為輸入流
? ? ? ? ? ? InputStream inputStream = fileItem.getInputStream();
? ? ? ? ? ? data = new byte[inputStream.available()];
? ? ? ? ? ? inputStream.read(data);
? ? ? ? ? ? inputStream.close();
? ? ? ? ? ? // 對字節(jié)數組進行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;
?? ?}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: