html:
<input type="file" accept="image/*" id="jobData" onchange="onc()" style="position:absolute;top:0;left:0;font-size:34px; opacity:0" multiple />
<span id="filename" style="vertical-align: middle">未上传文件</span>
<input type="submit" class="btn btn-primary float-end " onclick="addshowpagejs()" value="确认上传" />
js:
// 显示上传文件名称
function onc(){
var obj = document.getElementById("jobData");
var names = "文件- ";
for(var i=0;i<obj.files.length;i++){
names = names.concat( i+1,":",obj.files[i].name," ");
}
document.getElementById("filename").innerText = names;
}
// 上传
function addshowpagejs(){
var formData = new FormData();
var files = $("#jobData");
for (var i = 0; i < files[0].files.length; i++) {
formData.append("file", files[0].files[i]);
}
$.ajax({
url: '/showpage/addshowpage',
type: 'post',
data: formData,
cache: false,
contentType: false, // 不使用默认请求头类型 application/x-www-form-urlencoded; charset=UTF-8
processData: false, // 不序列化
success: function() {
alert("ok");
},
error: function (){
alert("服务器正忙,请稍后再试...")
}
});
}
controller:
@Controller
@RequestMapping("/showpage")
public class ShowPageController {
@RequestMapping(value = "/addshowpage" , method = RequestMethod.POST)
@ResponseBody
public void addShowpage(@RequestParam("file") List<MultipartFile> uploadfile, HttpServletRequest request) {
if (!uploadfile.isEmpty() && uploadfile.size() > 0) {
//循环输出上传文件
for (MultipartFile file : uploadfile) {
//获取上传文件原始名
String originalFilename = file.getOriginalFilename();
System.out.println(originalFilename);
//设置上传文件的保存地址目录
String dirPath = request.getServletContext().getRealPath("/files/showpage/");
File filePath = new File(dirPath);
System.out.println(dirPath);
//如果保存文件的地址不存在,就先新建目录
if (!filePath.exists()) {
filePath.mkdirs();
}
//使用uuid重新命名上传的文件名称
String newFilename = UUID.randomUUID() + "_" + originalFilename;
System.out.println(newFilename);
try {
//使用MultipartFile接口的方法完成文件的上传到指定位置
file.transferTo(new File(dirPath, newFilename));
} catch (Exception e) {
e.printStackTrace();
}
}
}else{
System.out.println("失败");
}
}
}