springboot文件上传前端+后台接收文件(单文件+多文件)

最新推荐文章于 2024-07-11 21:12:48 发布

gmjdll

最新推荐文章于 2024-07-11 21:12:48 发布

阅读量2.9w

点赞数 7

分类专栏：前端 spring boot spring mvc

本文链接：https://blog.csdn.net/sinat_34888853/article/details/86238768

版权

spring boot 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

spring mvc

8 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

SpringBoot+Jquery
1.单文件
前端Jquery

var url="..........";//上传地址
formData = new FormData();
//uploadFile就是后台接收的文件参数名称
formData.append('uploadFile', $('#file')[0].files[0]);
jQuery.ajax({
        type: 'post',
        url: url,
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
        	alert("success");
        }
    })

后台接收

   @RequestMapping(value = "/pic/upload", method = RequestMethod.POST)
    public Response upload(@RequestParam("uploadFile") MultipartFile uploadFile) throws IOException {
        if (null == uploadFile) {
            return response("上传失败，无法找到文件！");
        }
        // BMP、JPG、JPEG、PNG、GIF
        String fileName = uploadFile.getOriginalFilename().toLowerCase();
        if (!fileName.endsWith(".bmp") && !fileName.endsWith(".jpg")
                && !fileName.endsWith(".jpeg") && !fileName.endsWith(".png")
                && !fileName.endsWith(".gif")) {
            return response("上传失败，请选择BMP、JPG、JPEG、PNG、GIF文件！");
        }
        //逻辑处理
        return response("成功");
    }

注：springboot文件上传时注意配置文件大小限制，参考https://blog.csdn.net/sinat_34888853/article/details/86237837

2.多文件
页面js

<body>

<form id="form111" enctype="multipart/form-data" method="post" action="#">
    <!-- 这个可以选择多个文件，而且只可以选图片 -->
    <input type="file" name="files" multiple id="test">
    <input type="button" id="btn">
</form>
</body>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        $("#btn").click(function () {
            var formData = {};
            formData = new FormData();
            var this_1=  document.getElementById('test');
            var files = this_1.files;

            for (var i = 0, len = files.length; i < len; i++) {
                formData.append('uploadFile', files[i]);
            }
            jQuery.ajax({
                type: 'post',
                url: "/user/console/multiImport",
                data: formData,
                contentType: false,
                processData: false,

                success: function (data) {

                },
                error: function () {
                }
            })
        })

    })
</script>

后端接收：

@RequestMapping(value = "/multiImport", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> multiImport(@RequestParam("uploadFile") MultipartFile[] uploadFile) {
    Map<String, Object> result = new HashMap<String, Object>();
    System.out.println(uploadFile.length);
    for (MultipartFile multipartFile:uploadFile) {
        System.out.println("文件"+multipartFile.getOriginalFilename());
    }
    return result;
}

gmjdll

关注

7
点赞
踩
61

收藏

觉得还不错? 一键收藏
8
评论
springboot文件上传前端+后台接收文件(单文件+多文件)

SpringBoot+Jquery1.单文件前端Jqueryvar url="..........";//上传地址formData = new FormData();//uploadFile就是后台接收的文件参数名称formData.append('uploadFile', $('#file')[0].files[0]);jQuery.ajax({ type: 'po...
复制链接

扫一扫

专栏目录