zoukankan      html  css  js  c++  java
  • 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
    本文版权归作者和博客园共有,转载必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
  • 相关阅读:
    Mybatis连接配置文件详解
    MyBatis映射配置文件详解
    AGC 016 C
    CodeForces
    UVA
    某5道CF水题
    DZY Loves Chinese / DZY Loves Chinese II
    [SHOI2016] 黑暗前的幻想乡
    CodeForces
    CodeForces
  • 原文地址:https://www.cnblogs.com/binbingg/p/13819970.html
Copyright © 2011-2022 走看看