spring多个文件和数据同时上传

前台页面的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加上,之前一直没有成功就是因为这个注解的原因,亲测有效,因为我这里是把多个文件名拼接存入数据库当中,根据实际应用改变自己的需求。

在这里我没有写注释,有什么不懂的可以直接问

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值