springboot+h5+formdata文件上传带进度条(文件+其他属性一起)
网上很多文章都是只介绍了H5的,有些只写了部分代码,有些是通过后台来实现的,我比较了一下,体验最好并且最简单的还是用H5做的最好,下面记录下我的操作步骤:
H5部分
<!--表单部分-->
<form id="upload_form">
<div>资源名称:<input type="text" name="name" /></div>
<div>资源文件:<input type="file" name="file" /></div>
<div><input type="button" value="上传文件" /></div>
</form>
<!--进度条部分(默认隐藏)-->
<div style="display: none;" class="progress-body">
<div style="margin-bottom: 10px;"><span style="width: 100px; display: inline-block; text-align: right">上传进度:</span><progress></progress></div>
<div style="margin-bottom: 10px; margin-left: 30px; width: 200px;" class="progress-speed">0 bytes</div>
<div style="margin-bottom: 10px; margin-left: 30px; width: 200px;" class="progress-info">资料正准备上传</div>
</div>
CSS部分
progress {
background-color: #56BE64;
}
progress::-webkit-progress-bar {
background: #ccc;
}
progress::-webkit-progress-value {
background: #56BE64;
}
JS部分(需要引用jquery文件)
/******核心AJAX部分开始******/
var formData = new FormData($('#upload_form')[0]);
$.ajax({
url: '/admin/resource/upload',
type: 'post',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
xhr: function () {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
//处理进度条的事件
xhr.upload.addEventListener("progress", progressHandle, false);
//加载完成的事件
xhr.addEventListener("load", completeHandle, false);
//加载出错的事件
xhr.addEventListener("error", failedHandle, false);
//加载取消的事件
xhr.addEventListener("abort", canceledHandle, false);
//开始显示进度条
showProgress();
return xhr;
}
}, success: function (data) {
if (data.code == 200) {
alert('添加资源成功');
} else {
alert(data.message);
}
}
});
/******核心AJAX部分结束******/
//显示进度条的函数
function showProgress() {
$(".progress-body").css("display", "block");
}
//隐藏进度条的函数
function hideProgress() {
$('.progress-body>.progress-speed', window.parent.document).html("0 bytes");
$('.progress-body>.progress-info', window.parent.document).html("资料正准备上传");
$(".progress-body", window.parent.document).css("display", "none");
}
//进度条更新
function progressHandle(e) {
$('.progress-body progress').attr({value: e.loaded, max: e.total});
var percent = e.loaded / e.total * 100;
$('.progress-body>.progress-speed').html(((e.loaded / 1024) / 1024).toFixed(2) + "/" + ((e.total / 1024) / 1024).toFixed(2) + " MB. " + percent.toFixed(2) + "%");
if (percent == 100) {
$('.progress-body>.progress-info').html("上传完成,后台正在处理...");
} else {
$('.progress-body>.progress-info').html("资料上传ing...");
}
};
//上传完成处理函数
function completeHandle(e) {
$('.progress-body>.progress-info').html("上传资料完成");
setTimeout(hideProgress, 2000);
};
//上传出错处理函数
function failedHandle(e) {
$('.progress-body>.progress-info', window.parent.document).html("上传资源出错");
};
//上传取消处理函数
function canceledHandle(e) {
$('.progress-body>.progress-info', window.parent.document).html("上传资源取消");
};
后台controller部分
//文件上传存储路径
@Value("${file.src.path}")
String srcPath;
/**
* 资源上传
*
* @param map
* @param file
* @return
* @throws IOException
*/
@RequestMapping("upload")
@ResponseBody
public AjaxResult addResource(@RequestParam Map<String, Object> map, @RequestParam("file") MultipartFile file) throws IOException {
Object name = map.get("name");
if (name == null) {
return AjaxResult.failResult("资源名称不能为空");
}
//1.验证资源路径是否存在
File srcDirPath = new File(srcPath);
if (!srcDirPath.exists()) {
srcDirPath.mkdirs();
}
//2.传输文件到服务器
String originalFilename = file.getOriginalFilename();
File srcFile = new File(srcPath + originalFilename);
file.transferTo(srcFile);
try {
//3.资源入库
Map<String, Object> resourceMap = new HashMap<>();
resourceMap.put("name", name);
resourceMap.put("filePath", srcFile.getPath());
resourceService.addResource(resourceMap);
} catch (Exception e) {
e.printStackTrace();
}
return AjaxResult.successResult();
}