多文件上传，ajax提交表单

最新推荐文章于 2022-10-17 18:00:01 发布

奥利geigeigei

最新推荐文章于 2022-10-17 18:00:01 发布

阅读量355

点赞数

分类专栏： Java学习笔记

本文链接：https://blog.csdn.net/m0_37054738/article/details/78706885

版权

Java学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、前台form

<form class="form-inline input-line" id="uploadForm">

     <input type="file" class="form-control input-sm width-150" name="files">

     <input type="button" class="btn btn-primary" οnclick="doUpload()" value="保存">

</form>

2、前台JS。

$("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单，实现表单的异步提交，但是二者有区别。

首先，前者，只能序列化表单中的数据，比如文本框等input select等的数据，但是对于文件，比如文件上传，无法实现，那么这时候就需要用到FormData。但也要注意，对于jquery的要求是，好像是版本1.8及其以上方可支持。另外该对象不仅仅可以序列化文件，一样可以用作表单数据的序列化，（就是说包含了serialize()的功能）；

<script th:inline="javascript">
    function doUpload() {

	var formData = new FormData($("#uploadForm")[0]);

	$.ajax({

    		url: '/taskAllot/dataUpload',
    		type: 'POST',
    		data: formData,
    		async: false,
    		cache: false,
    		contentType: false,
    		processData: false,
   		success: function (result) {
      		  if (result.code == 200) { //返回执行代码，读者自写
           		 layer.msg("上传成功", {time:500}, function () {
               		 location.reload();
          		  });
       		 }else{
          		  alert(result.message);
     		  }
   		 }
	});

3、后台Controller，这里前台传过来一个文件数组（MultipartFile[] files）

@RequestMapping("/dataUpload")
@ResponseBody
public Result dataUpload(@RequestParam("files") MultipartFile[] files) {

    return ecgTaskAllotService.uploadEcgData(files);
}

4、后台Service

public void uploadEcgData(MultipartFile[] files) {
//        System.out.println("files.length=" + files.length + ",hzs.length=" + hzs.length + ",selMarkerNames.length=" + selMarkerNames.length);
        Result result = ResultGenerator.genResult("上传失败");
        for(int i = 0; i < files.length; i++){
            MultipartFile file = files[i];
            result = transferZipFile(file);
        }
        return result;
    }

/**
 * 由于无法获取前台上传的zip文件源地址，所以先将前台上传的zip进行转存
 * @param filePath 前台传过来的MultipartFile
 * @param finalSaveDir 压缩包保存目录
 * @param finalSaveDirComplete 压缩包所在位置（加上文件名）
 * @return
 */
public boolean transferZipFile(MultipartFile filePath, String finalSaveDir, String finalSaveDirComplete){
    boolean flag = false;
    try {
        if (new File(finalSaveDir).exists()) {
            filePath.transferTo(new File(finalSaveDirComplete));
            flag = true;
        }else{
            new File(finalSaveDir).mkdirs();
            filePath.transferTo(new File(finalSaveDirComplete));
            flag = true;
        }
    }catch (Exception e){
        e.printStackTrace();
    }
    return flag;
}