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");

posted @ 2020-10-15 13:05 Binge-和时间做朋友阅读(146) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

Binge - 和时间做朋友

致力于Java、大数据和人工智能技术培训教育

SpringMVC 文件上传

引言

SpringMVC 文件上传步骤

添加 springmvc 文件上传配置

SpringMVC 接收和处理上传文件

前端 ajax 上传文件

导航目录