body中添加如下代码
上传文件:
文件信息:...
返回结果:...
效果如下：
image.png
接下来是JS获取到上传的文件的相关信息
$(":file").change(function () {
var file = this.files[0];
var name = file.name;
var size = file.size;
var type = file.type;
url = window.URL.createObjectURL(file);
totalSize += size;
$(".show_info").html("文件名：" + name + "
文件类型：" + type + "
文件大小：" + size + "
url: " + url);
console.log("ok");
// 恢复进度条的状态
//背景成绿色
$(".progress").css("background", "#262626");
//归零 隐藏
$("#mt-progress-length").css({"width": "0%", "opacity": "1"});
$("#mt-progress-value").html(0);
})
点击上传的事件
function upload() {
//背景恢复
$(".progress").css("background", "#262626");
//归零 隐藏
$("#mt-progress-length").css({"width": "0%", "opacity": "1"});
$("#mt-progress-value").html(0);
//创建formData对象 初始化为form表单中的数据
//需要添加其他数据 就可以使用 formData.append("property", "value");
var formData = new FormData();
var fileInput = document.getElementById("myFile");
var file = fileInput.files[0];
formData.append("file", file);
// ajax异步上传
$.ajax({
url: "http://localhost:1001/login/upload",
type: "POST",
data: formData,
contentType: false, //必须false才会自动加上正确的Content-Type
processData: false, //必须false才会避开jQuery对 formdata 的默认处理
enctype: 'multipart/form-data',
xhr: function () {
//获取ajax中的ajaxSettings的xhr对象 为他的upload属性绑定progress事件的处理函数
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
//检查其属性upload是否存在
myXhr.upload.addEventListener("progress", resultProgress, false);
}
return myXhr;
},
success: function (data) {
console.log("aaa");
},
error: function (data) {
console.log("cccc");
}
})
}
注意重点：myXhr.upload.addEventListener("progress", resultProgress, false);
其中resultProgress是回调函数的函数名
回调函数如下
//上传进度回调函数
function resultProgress(e) {
if (e.lengthComputable) {
var percent = e.loaded / e.total * 100;
$(".show_result").html(percent + "%");
var percentStr = String(percent);
if (percentStr == "100") {
percentStr = "100.0";
}
percentStr = percentStr.substring(0, percentStr.indexOf("."));
$("#mt-progress-value").html(percentStr);
$("#mt-progress-length").css("width", percentStr + "%");
if (percentStr == "100") {
setTimeout(function () {
//背景成绿色
$(".progress").css("background", "#15AD66");
//归零 隐藏
$("#mt-progress-length").css({"width": "0%", "opacity": "0"});
}, 500);
}
}
这是前端的部分代码
下面是后端的部分代码
拦截器中添加请求头
response.setHeader("Access-Control-Allow-Origin", "*");
controller中添加对应的接口地址
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public Map upload(
@RequestParam("file") MultipartFile file,
HttpServletResponse response,
HttpServletRequest request) {
// request.
response.setHeader("Access-Control-Allow-Origin", "*");
// request.
System.out.println("this is upload...");
Map map = new HashMap<>();
map.put("aaa", "bbb");
return map;
}
即可完成上传时触发回调函数更新页面数据从而修改进度条的值
下面是完整代码:
Title
上传文件:
文件信息:...
返回结果:...