SpringMVC使用js提交表单上传多文件,并如何防止表单自动提交

摘要: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实现数据校验、实现复杂的业务逻辑处理

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章