多文件上传保存到本地服务器

进来的伙伴请先看下面图片是否否和自己的制作要求 节约时间珍爱头发~

先了解下多文件用request接收:

　　 MultipartHttpServletRequest继承了HttpServletRequest以及MultipartRequest.
其中MultipartRequest中定义了相关的文件访问操作. MultipartHttpServletRequest重写
了HttpServletRequest中的方法, 并进行了扩展. 如果以HttpServletRequest来接收参
数, 则需要先将其转为MultipartHttpServletRequest类型
MultipartHttpServletRequest request = (MultipartHttpServletRequest) HttpServletRequest;

前端: form表单+文件上传 formdata真好用 ajax传输多文件先遍历下文件再存入formdata

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多文件上传</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>

<form id="form">
  <p>姓名:<input type="text" name="userName" value="大乔"></p>
    <p>性别:<input type="radio" name="sex" value="男" checked>男
            <input type="radio" name="sex" value="女">女
    </p>
    <p>尺码:
    <select name="city">
        <option value="36D">36码</option>
        <option value="小A">小A</option>
    </select>
    </p>
</form>

<p>文件上传:<input type="file" id="file" name="files" multiple="multiple" accept="*"></p>

<button type="button" onclick="tijiao()">上传</button>

</body>


<script type="text/javascript">

    function  tijiao() {
        var formData = new FormData($("#form")[0]);
        //files[0]获取不到改为了files !
       var files = document.getElementById('file').files;
        for (var i=0;i<files.length;i++){
            formData.append("files",files[i]);
        }

       $.ajax({
            type: 'post',
            url: "uploadd/uploadTestt",
            data: formData,
            dataType: "JSON",
            cache: false,
            processData: false,
            contentType: false,
            success: function (map) {
                    alert(map.name+"选好了她的尺码并上传了高清晰美颜照片");
　　　　　　　　　　　　//alert(map["name"]+选好了.....);
                
            },
           error:function () {
               alert("所上传文件超过限制的大小");
           }
        });
   };


    

</script>
</html>

后台: 将HttpServletRequest转型为MultipartHttpServletRequest，就能非常方便地得到文件名和文件内容! 看下文只要不传高清无码照一般没事有大小文件限制(已更改看下文)

@Controller
@RequestMapping(value = "/uploadd",method = RequestMethod.POST)
public class controller1 {

    @RequestMapping("/uploadTestt")
    @ResponseBody
    public Object test1(@RequestParam("files") MultipartFile files, HttpServletRequest request, HttpServletResponse response) throws IOException {
        String path = "D:/pic/";
        String userName = request.getParameter("userName");
        System.out.println(userName);

        Map<String,Object> map = new HashMap<String, Object>();
        map.put("success","200");
        map.put("name",userName);

        MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;
        List<MultipartFile> fileList =mRequest.getFiles("files");

        for (int j=0;j<fileList.size();j++){
            MultipartFile file = fileList.get(j);
            String originalFilename = file.getOriginalFilename();
            String substring = originalFilename.substring(originalFilename.lastIndexOf("."));
            //保存的文件名
            String dFileName = UUID.randomUUID()+substring;
            file.transferTo(new File(path+dFileName));

        }
        return map;
    }

}

成功图:

限制上传单个文件的大小: 在application.properties中配置

　　spring.servlet.multipart.max-file-size=3MB

　　spring.servlet.multipart.max-request-size=3MB

在此大小下过大会抛异常所以

　　有个重大发现好像boot1.4以上版本配置变了要写字节所以我这样试了下可以

spring.servlet.multipart.max-file-size=1572864
spring.servlet.multipart.max-request-size=1572864

要是不定义yml的话会如下显示按框架默认大小

对于单文件前台也定义个和yml一样的大小因为你上传图片yml就给你拦住了一切以yml为主前台写个假判断就行得到文件的值和你定义的大小比较下啊! 我的头发! 生拼硬凑也要实现这个功能!

知道为什么写字节么因为$("xx")[0].files[0],size获取的单位是字节装下b啦 $["#xx"][0]这种是jq写法转js 和下面一个意思的啦

var picSize = 1572864;
        var size = document.getElementById('file').files[0].size;
        if (size>picSize){
            alert("大于2M");
            return false;

        }

失败图片:

成功展示:

单文件上传我前台写的可以获取单个文件大小并和定义的大小判断以及弹窗多文件的话上传失败直接走的error

这是文件大小转换下能不动脑咱就不动

http://www.bejson.com/convert/filesize/