JS实现上传文件显示进度条
作者:酷爱编程的小猿同学
这篇文章主要为大家详细介绍了JS实现上传文件显示进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现上传文件显示进度条的具体代码,供大家参考,具体内容如下
用户反馈:图片上传过程中,如果网络比较慢,会发现上传图片后没有一点反应,体验性很差,图片回显也比较慢
解决思路:通过XMLHttpRequest的progress来实现监听图片上传的进度,实时显示百分比,后台保存图片成功后再将图片转为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); //请求完成后执行的操作 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); //发送请求 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(); // 对字节数组进行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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。