针对网络缓慢时图片上传无反馈及回显慢的问题，本文介绍利用XMLHttpRequest的progress事件监听上传进度。通过FormData发送文件，实时显示百分比进度条，并在后端保存成功后将图片转为Base64字符串在前端直接展示，从而显著提升用户体验。
本文提供了一段使用JavaScript实现文件上传时显示进度条的具体代码示例，供读者参考学习。
问题背景与解决思路
在实际使用中，如果网络状况不佳，用户上传图片后往往长时间没有任何反应，且图片回显速度缓慢，这严重影响了用户体验。
为了解决这一问题，可以通过XMLHttpRequest对象的progress事件来监听图片上传的实时进度，并动态显示上传百分比。同时，后台在成功保存图片后，将图片转换为Base64编码的字符串返回给前端进行展示，这种处理方式能显著改善用户的交互体验。
最终期望实现的效果包括以下两点：
第一，用户能够直观地看到图片上传的进度条以及具体的百分比数值。
第二，通过在前端将图片转换为Base64编码字符串进行显示，从而提升图片回显的速度。
前端HTML与JS实现
以下是相关的HTML代码实现部分：
<!-- 上传input -->
<input class="file-input" name="uploadImage" id="uploadImage" type="file">
<!-- 上传进度条显示 -->
<a id="showProgress" style="display:none;" href="#"></a> 接下来是核心的JavaScript代码逻辑：
// 上传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;
}以上就是本文介绍的全部内容，希望这些代码示例能对读者的学习有所帮助，同时也欢迎大家继续支持本站。