摘要:js提交表单(目的是做非空校验)、上传多文件、避免使用<button>防止表单自动提交
HTML代码:
<form id="add_open" action="rest/admin/library/add_open" method="post" enctype="multipart/form-data">
<div class="white_title">
<span class="dangqian">公开课>></span>新增公开课
</div>
<div class="curric_form">
<div class="curric_name">
课程名称
</div>
<div class="curric_ipt">
<input type="text" class="open_name" name="courseTitle" />
</div>
</div>
<div>
<input type="file" class="file_photo_img" id="file_img" name="file_img">
<input class="murric_file" type="file" id="courseVideoPath" name="courseVideoPath" multiple>
<input class="murric_file" type="file" id="courseVideoPath" name="courseVideoPath" multiple>
</div>
</form>
js代码:
$(".open_save").bind("click", function()
{
//非空校验
$("#add_open").submit();
})
Controller代码 :
@RequestMapping(value = "/add_open", method = RequestMethod.POST, produces = "application/json")
@ResponseBody
public void addOpen(@RequestParam("courseVideoPath") MultipartFile[] courseVideoPath,HttpServletRequest request, HttpServletResponse response) throws IOException
{
...
for(int i=0; i<chapterNames.length; i++){ //循环获取文件上传对象
LibraryCourseHapters l=new LibraryCourseHapters();
l.setChapterName(chapterNames[i]);
l.setClassHours(chapterHourss[i]);
//上传视频
String saveVideoPath = request.getServletContext().getRealPath("/uploadvideo")+"/";
File file=new File(saveVideoPath);
if(!file.exists()){
file.mkdirs();
}
String videoName=courseVideoPath[i].getOriginalFilename();
String suffix=videoName.substring(videoName.lastIndexOf("."));
String newVideoName = new SimpleDateFormat("yyyyMMddHHmmssSS").format(new Date())+ UUID.randomUUID() + suffix;
if(!courseVideoPath[i].isEmpty()){
try {
FileOutputStream fos = new FileOutputStream(saveVideoPath+newVideoName);
//获取原文件名
InputStream in=courseVideoPath[i].getInputStream();
int b = 0;
while ((b = in.read()) != -1) {
fos.write(b);
}
fos.close();
in.close();
} catch (Exception e) {
msg += "信息有误";
e.printStackTrace();
}
}
l.setCourseVideoPath("/uploadvideo/"+newVideoName);
...
}
应用:可以实现table数据提交,在js实现数据校验、实现复杂的业务逻辑处理