SpringMVC 文件上传

引言

SpringMVC 的文件上传特性是对原生文件上传繁琐的 I/O 流进行封装,目的是简化文件上传操作

SpringMVC 文件上传步骤

添加 springmvc 文件上传配置

在 SpringMVC 配置文件中添加如下配置:

<!-- 配置文件上传 -->
<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--设置字符集编码方式 -->
	<property name="defaultEncoding" value="utf-8"></property>
        <!--设置上传文件最大值(单位字节) -->
	<property name="maxUploadSize" value="10485760000"></property>
        <!--设置上传文件的缓存区最大值 -->
	<property name="maxInMemorySize" value="40960"></property>
</bean>
SpringMVC 接收和处理上传文件

SpringMVC 会将上传的文件绑定到 MultipartFile 对象中,该对象提供了获取上传文件内容、文件名等方法

代码如下:

@RestController
public 
class UploadFileController {
    
      @RequestMapping("file")
    
      public String uploadfile(MultipartFile file) throws IOException {
       
       if (!file.isEmpty()) {
            //获取上传文件名
            
            String filename = file.getOriginalFilename();
            //将上传的文件保存到磁盘中
            
            file.transferTo(new File("C:/" +File.separator+filename));

            
            return "success";
        
        } else {
            
            return "fail";
    
        }
  
     }

}

前端 ajax 上传文件
<!DOCTYPE html>

<html lang="en">

      <head>
    
      <meta charset="UTF-8">
    
      <title>ajax上传文件</title>
    
      <script src="jquery.js"></script>
    
      <script>
        
            $(function(){
            //绑定点击按钮事件
            
                  $("#btn").click(function () {
                
                        //创建表单数据对象(用于存储表单数据)
                
                        var formData = new FormData();
                
                       //获取表单文件对象
                
                        var file = $("#file")[0].files[0];
                
                        //将表单文件对象添加到表单数据对象中
                
                        formData.append('file',file);
               
                        $.ajax({
                   
                              url:"file",
                   
                              type:"POST",
                   
                              data:formData,
                   
                              processData:false,
                   
                              contentType:false,
                   
                              success:function (data) {
                       
                                    alert(data)
                   
                              }
               
                        })
            
            });
        
      })
    
</script>

</head>

<body>

      <form action="#" method="post">
    
            <input type="file" name="file" id="file" /><br />
    
            <input type="button" name="btn" id="btn" value="上传" />

      </form>

</body>

</html>

HTML5 提供了一个新的 FormData 对象,它可以模仿 form 表单存储数据,将 form 表单元素的 name 与 value 进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。

  • append(key,value)方法: 在数据末尾追加数据
//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//通过append()方法在末尾追加 key 为 name,value 值为 ”张三“ 的数据
formdata.append("name","张三");

FormData 对象也可以使用表单来添加数据

//表单
<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>

// 获取页面已有的一个form表单
var form = $("#id");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上,添加其他数据
formData.append("id","1111111");
作者:Binge
本文版权归作者和博客园共有,转载必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
原文地址:https://www.cnblogs.com/binbingg/p/13819970.html