前台页面的html,前台的html主要就是在form中放多个input,这里的点击事件只是为了获取文件名,不用在意
<form id="uploadForm" enctype="multipart/form-data">
<input type="hidden" id="lessionBroadcastId" name="lessionBroadcastId" value=“1”>
<label class="btn btn-info" for="uploadfile">上传文件<i class="fa fa-plus" aria-hidden="true"></i></label>
<input type="file" name="files" id="uploadfile" onclick="daojishi()">
<label class="btn btn-info" for="uploadfile">上传文件<i class="fa fa-plus" aria-hidden="true"></i></label>
<input type="file" name="files" id="uploadfile" onclick="daojishi()">
</form>
这里需要的form中的enctype="multipart/form-data"一定要加上
然后是js代码
/*在页面调用*/
function daojishi() {
setInterval("show()",1000);
}
/*获取文件的名称*/
function show() {
$(".info").html($("#uploadfile").val())
}
function uploadFile() {
var file = new FormData($("#uploadForm")[0]);
if("undefined" != typeof (file) && file != null && file != ''){
$.ajax({
url:"/broadcast/teacherBroadcastEveryFileAdd"
,type:"post"
,data:file
,async:false
,dataType: 'json'
,cache:false
,contentType:false
,processData:false
,success:function (data) {
if(data[0]=='succ'){
window.parent.location.reload();
}else {
alert("添加失败,请重新添加")
}
}
})
}
}
用ajax向后台传递的时候需要注意的是async:false这个属性一定要添加,否则在后台会报错,还有data一定要改为file
最后我们看一下控制器
@ResponseBody
@RequestMapping("/teacherBroadcastEveryFileAdd")
public List addLession(@RequestParam("files") MultipartFile[] files, @RequestParam("lessionBroadcastId") int lessionBroadcastId) {
List list = new ArrayList();
String videoName = "";
String newVideoName = "";
String lessionBroadcastVideoName = "";
String lessionBroadcastVideo = "";
for (MultipartFile file : files) {
videoName = file.getOriginalFilename();
if ("".equals(videoName)) continue;
String suffix = videoName.substring(videoName.lastIndexOf("."));
File fileMkdir = new File("E:\\courseVideo");
if (!fileMkdir.exists()) {
fileMkdir.mkdir();
}
String filePath = fileMkdir.getPath() + "\\";
newVideoName = UUID.randomUUID() + suffix; //作为lession表的video存入
lessionBroadcastVideo += newVideoName + "_";
lessionBroadcastVideoName += videoName+ "_";
File dest = new File(filePath + newVideoName);
try {
//写入文件
file.transferTo(dest);
} catch (IOException e) {
return list;
}
}
LessionBroadcast lessionBroadcast = new LessionBroadcast();
lessionBroadcast.setLessionBroadcastVideo(lessionBroadcastVideo);
lessionBroadcast.setLessionBroadcastId(lessionBroadcastId);
lessionBroadcast.setlessionBroadcastVideoName(lessionBroadcastVideoName);
lessionBroadcastService.updateLessionBroadcast(lessionBroadcast);
return null;
}
在控制器这一端有两个参数一个是files,一个是lessionBroadcastId,files就是前台所有的文件,MultipartFile接收,若果是多文件上传那就要用MultipartFile [] 接收,它会以数组的形式传输以便于我们保存,一个就是前台传递过来的数据,这里我是用它来保存到相应的数据库的,需要特别注意的是如果你既想传文件又想传数据到后台的话那就必须要把这个@RequestParam加上,之前一直没有成功就是因为这个注解的原因,亲测有效,因为我这里是把多个文件名拼接存入数据库当中,根据实际应用改变自己的需求。
在这里我没有写注释,有什么不懂的可以直接问