Spring mvc多文件上传和传参前端+后台代码案例 Java

最新推荐文章于 2022-08-18 13:09:52 发布

GuanjieLucky

最新推荐文章于 2022-08-18 13:09:52 发布

阅读量2k

点赞数

文章标签：文件上传 Spring mvc

本文链接：https://blog.csdn.net/qq_33411963/article/details/80984777

版权

使用的是ajaxFileUpload这个方法上传的，用的话只导入jquery包是不行的，还要导入ajaxfileupload.js，

上传多个文件在input标签要设置 multiple="multiple" 这个属性

传递文件：是用fileElementId这个属性，值为你所上传的input标签name，id值！

传递参数：就和平常使用ajax一样传就行了。例如： data:{fileNames:filePathArray}

获取文件名：获取每个文件名代码如下图，你也可以通过循环取出，我是直接通过下标取出！

$("#uploadfile")[0] 里面的uploadfile就是你所上传的input标签id值。

files[0]表示第一个文件名 files[1]表示第二个文件名！

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<form id="upload-file-form">
    <input id="uploadfile" type="file" name="uploadfile"  multiple="multiple"/>
    <a id='btnExcel' οnclick="uploadFile();" href='javascript:;'>文件上传</a>
</form>
</body>
<script src="./lib/JQuery-1.9.1/jquery-1.9.1.js"></script>
<script src="./lib/ajaxfileupload.js"></script>
<content tag="page-js">
    <script type="text/javascript">

        function uploadFile() {
            var filePathArray = [];
            filePathArray.push($("#uploadfile").val());
            $.ajaxFileUpload({
                url:"http://localhost:8080/MyHR/myhrChat/saveFile.do",
                type: "POST",
                secureuri: false,
                fileElementId: "uploadfile",//对应上传标签的id,name名称
          dataType: 'json',
                data:{fileNames:filePathArray},//传递参数
          processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    $("#uploadfile").val('');
                },
                error: function () {
                    alert("上传失败！");
                }
            });
        }
    </script>
</content>
</body>
</html>

后台代码：

@RequestMapping(value = "/saveFile")
public void saveFile(@RequestParam("uploadfile") MultipartFile[] uploadfile,String[] fileNames){
   try {
      hrFileService.uploadFile(uploadfile,"","");
   } catch (Exception e) {
      e.printStackTrace();
   }
}