在html中上传文件,后台获取并进行操作

HTML中上传文件

在Web项目中有许多需求,项目过后对大批零散的碎片记录笔记。

此篇笔记内容为:在Html中上传文件,后台获取来操作的需求。

1、表单提交

  1. 前端:
  • from标签上一定要添加enctype=“multipart/form-data”

  • <input>标签中设置type=“file”,若要多文件上传则添加属性multiple=“multiple”

  • <form th:action="@{/file/upload}" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td><input type="file" name="file" multiple="multiple" /></td>
            </tr>
            <tr>
                <td><input type="submit" value="提交"/></td>
            </tr>
             <hr>
         </table>
     </form>
    
  1. 后端:
  • 使用MultipartFile或者MultipartFile[]接收即可

  • 调用transferTo(File file)即可保存

    @PostMapping("/updateFile")
    @ResponseBody
    public String updateFile(@RequestParam("name")String name,
                             @RequestParam("files") MultipartFile[] files){
    
        for (MultipartFile multipartFile : multipartFiles) {
            try {
                multipartFile.transferTo(file);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return "0";
    }
    

2、JavaScript中异步提交:

  1. 前端:
  • 通过文件框的"files"属性获得

  • js中定义了FormData对象,方便传输,有key-value的结构。同时也能通过传入form的element对象直接将表单数据初始化到formData实例对象中。

  • var files = $(this).prop("files");
    if (files.length <= 0) {
        return;
    }
    var formData = new FormData();
    //将file封装到Array
    for(var i = 0;i < files.length;i++){
        //不能给FormData对象中直接传入一个数组,通过多次append的key相同时则可达到传数组的效果
        formData.append("files",files[i]);
    }
    formData.append("name",name);
    $.ajax({
        type:"post",
        url:"updateFile",
        data:formData,
        dataType:"json"
        processData:false,//数据不做处理
        contentType:false,//不要设置content-Type请求头
        cache:false,//上传文件无需缓存
        success:function (data) {
    
        }
    
    })
    
  1. 后端:
  • 如果ajax中数据传的是FormData对象,则后端获取时通过key值即可获取到value

  • @PostMapping("/updateFile")
    @ResponseBody
    public String updateFile(@RequestParam("name")String name,
                             @RequestParam("files") MultipartFile[] files){
        //保存当前图片,修改数据库中对应字段数据
        applicationService.saveFiles(files,name,enterprise.getId());
        return "0";
    }
    
上一篇:springboot实现文件上传


下一篇:一句代码上传MultipartFile图片到指定文件夹