碼上快樂

相關內容    簡體    繁體

spring boot:單文件上傳/多文件上傳/表單中多個文件域上傳(spring boot 2.3.2)

本文轉載自   查看原文   2020-08-12 14:15   821    spring/ spring boot/ 多文件/ java/ file/ upload/ 上傳文件/ jquery/ 上傳

一，表單中有多個文件域時如何實現說明和文件的對應？

     1,說明和文件對應

     文件上傳頁面中，如果有多個文件域又有多個相對應的文件說明時，

      文件和說明如何對應？

      我們在表單中給對應的file變量和text變量加上相同的數字即可

      在演示項目中使用了一個動態添加文件說明和文件域的頁面，

      供大家參考

 

    2，spring boot的文件上傳要注意的地方:

        需要修改spring boot的配置文件，

        指定允許上傳的文件大小,

        指定連接的超時時間，避免文件太大時上傳超時

       如果接入層使用了nginx,則nginx也要做相應配置

 

說明：劉宏締的架構森林是一個專注架構的博客，地址：https://www.cnblogs.com/architectforest

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/

說明：作者:劉宏締 郵箱: 371125307@qq.com

 

二，演示項目相關信息

1,項目地址:

https://github.com/liuhongdi/fileupload

 

2,功能說明：

   分別演示了：單文件上傳，

                     多文件上傳

                     同一個表單中有多個文件域時的上傳

 

3，項目結構：如圖:

 

 

三，配置文件說明

1，application.properties

#thymeleaf
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

#upload
spring.servlet.multipart.maxFileSize=10MB
spring.servlet.multipart.maxRequestSize=30MB
#tomcat,
server.tomcat.connection-timeout=20000
server.tomcat.max-http-form-post-size=30MB

#error
server.error.include-stacktrace=always
#errorlog
logging.level.org.springframework.web=trace

說明：
spring.servlet.multipart.maxFileSize=10MB    //單個文件最大的size
spring.servlet.multipart.maxRequestSize=30MB    //整個表單中上傳文件一共最大的size
#tomcat,
server.tomcat.connection-timeout=20000           //tomcat的連接超時時間，注意不能太短，我們在這里使用20秒
server.tomcat.max-http-form-post-size=30MB    //tomcat的表單最大post的文件大小

 

四，java文件說明

1，FileController.java

@Controller
@RequestMapping("/file")
public class FileController {

    //文件的保存路徑
    private final static String FILE_BASE_PATH = "/data/file/html";

    //多文件域上傳頁面
    @GetMapping("/uploadadd")
    public String uploadAdd(ModelMap modelMap) {
        return "image/uploadadd";
    }

    //處理多個文件域的表單上傳
    @PostMapping("/uploadadded")
    @ResponseBody
    public RestResult uploadadded(@RequestParam Map<String,String> params,HttpServletRequest request) {
        RestResult res = new RestResult();
        int num =  Integer.parseInt(params.get("num"));
        //打印文件域的名字，供調試用
        Iterator<String> it = ((MultipartHttpServletRequest)request).getFileNames();
        while (it.hasNext()) {
            String uploadFile = it.next();
            System.out.println("filename:"+uploadFile);
        }

        //根據表單中文件元素的數量遍歷
        for (int i=1;i<=num;i++) {
            //text
            String curText = params.get("text"+i);
            System.out.println("text:"+curText);
            //file
            MultipartFile curFile = ((MultipartHttpServletRequest)request).getFile("file"+i);
            if (curFile.isEmpty()) {
                continue;
            }
            //System.out.println("text:"+curText);
            String fileName = curFile.getOriginalFilename();
            System.out.println("文件名： " + fileName);
            // 文件后綴
            int lastDot = fileName.lastIndexOf(".");
            lastDot++;
            String fileType = fileName.substring(lastDot);
            // 重新生成唯一文件名，用於存儲數據庫
            String fileSn = UUID.randomUUID().toString();
            Map<String, String> map2 = new HashMap<String, String>();
            String destFilePath = FILE_BASE_PATH+"/"+fileSn+"."+fileType;
            File dest = new File(destFilePath);
            try {
                curFile.transferTo(dest);
            } catch (IOException e) {
                System.out.println("save ioexception");
                e.printStackTrace();
            }
        }
        return res.success(0,"上傳成功");
    }

    //單文件/多文件上傳頁面
    @GetMapping("/upload")
    public String upload(ModelMap modelMap) {
        return "image/upload";
    }

    //處理單文件/多文件上傳
    @PostMapping("/uploaded")
    @ResponseBody
    public RestResult uploaded(HttpServletRequest request) {
        RestResult res = new RestResult();
        List<MultipartFile> list = ((MultipartHttpServletRequest)request).getFiles("files");
        for (MultipartFile multipartFile : list) {
            if (list.isEmpty()) {
                continue;
            }
            // 文件名
            String fileName = multipartFile.getOriginalFilename();
            System.out.println("文件名： " + fileName);
            // 文件后綴
            int lastDot = fileName.lastIndexOf(".");
            lastDot++;
            String fileType = fileName.substring(lastDot);
                // 重新生成唯一文件名，用於存儲數據庫
                String fileSn = UUID.randomUUID().toString();
                Map<String, String> map2 = new HashMap<String, String>();
                String destFilePath = FILE_BASE_PATH+"/"+fileSn+"."+fileType;
                File dest = new File(destFilePath);
                try {
                    multipartFile.transferTo(dest);
                } catch (IOException e) {
                    System.out.println("save ioexception");
                    e.printStackTrace();
                    return res.error(0,"上傳失敗");
                }
        }
        return res.success(0,"上傳成功");
    }
}

說明：多個文件域上傳時，主要是把file變量和text變量做對應

 

2,RestResult.java

//api通用返回數據
public class RestResult<T> {

    //uuid,用作唯一標識符，供序列化和反序列化時檢測是否一致
    private static final long serialVersionUID = 7498483649536881777L;
    //標識代碼，0表示成功，非0表示出錯
    private Integer code;

    //提示信息，通常供報錯時使用
    private String msg;

    //正常返回時返回的數據
    private T data;

    //constructor
    public RestResult() {
    }

    //constructor
    public RestResult(Integer status, String msg, T data) {
        this.code = status;
        this.msg = msg;
        this.data = data;
    }

    //返回成功數據
    public RestResult success(T data) {
        return new RestResult(ResponseCode.SUCCESS.getCode(), ResponseCode.SUCCESS.getMsg(), data);
    }

    public static RestResult success(Integer code,String msg) {
        return new RestResult(code, msg, null);
    }

    //返回出錯數據
    public static RestResult error(ResponseCode code) {
        return new RestResult(code.getCode(), code.getMsg(), null);
    }

    public static RestResult error(Integer code,String msg) {
        return new RestResult(code, msg, null);
    }

    public Integer getCode() {
        return code;
    }
    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }
    public void setData(T data) {
        this.data = data;
    }
}

 

五,html文件說明

1,upload.html

<html lang="en">
<head>
    <script type="text/javascript" language="JavaScript" src="/js/jquery-1.6.2.min.js"></script>
</head>
<body>
<div style="width:100%;height:20px;background:#ffffff;font-size: 16px;" ></div>
<div id="content" style="width:800px;">
    <div style="width:800px;float:left;">
       <!--====================main begin=====================-->
        <div style="width:260px;height:200px;float:left;background: #eeeeee;padding-left: 10px;padding-top: 10px;">
            單文件上傳<br/>
            說明：不能多選<br/>
            <input id="fileone" type="file" name="fileone" /><br/><br/>
            <input type="button" name="go" value="單文件上傳" onclick="go_single_add()" />
        </div>
        <div style="width:380px;height:200px;float:left;margin-left:20px;background: #eeeeee;padding-left: 10px;padding-top: 10px;">
            多文件上傳<br/>
            說明：可以多選<br/>
            <input id="files" type="file" name="files" multiple /><br/><br/>
            <input type="button" name="go" value="多文件上傳" onclick="go_multi_add()" />
        </div>
        <!--====================main   end=====================-->
    </div>
</div>

<script>
    //單文件上傳
    function go_single_add(){
        //把表單中選中的文件添加到postdata
        var postdata=new FormData();
        if ($("#fileone")[0]==null || $("#fileone")[0].files.length<1){
            alert("未選中圖片")
            return false
        }
        for (var i=0;i<$("#fileone")[0].files.length;i++){
            postdata.append("files",$("#fileone")[0].files[i])
        }
        $.ajax({
            type:"POST",
            url:"/file/uploaded",
            data:postdata,
            //返回數據的格式
            datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
            processData: false,
            contentType: false,
            //成功返回之后調用的函數
            success:function(data){
                if (data.code == 0) {
                    alert('上傳成功:'+data.msg);
                    //window.location.href="/image/imagelist";
                } else {
                    alert("上傳失敗:"+data.msg);
                }
            },
            //調用執行后調用的函數
            complete: function(XMLHttpRequest, textStatus){
            },
            //調用出錯執行的函數
            error: function(XMLHttpRequest, textStatus, errorThrown){
                alert(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
            }
        });
    }
    //多文件上傳
    function go_multi_add(){
        //把表單中選中的文件添加到postdata
        var postdata=new FormData();
        if ($("#files")[0]==null || $("#files")[0].files.length<1){
            alert("未選中圖片")
            return false
        }
        for (var i=0;i<$("#files")[0].files.length;i++){
            postdata.append("files",$("#files")[0].files[i])
        }
        $.ajax({
            type:"POST",
            url:"/file/uploaded",
            data:postdata,
            //返回數據的格式
            datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
            processData: false,
            contentType: false,
            //成功返回之后調用的函數
            success:function(data){
                if (data.code == 0) {
                    alert('上傳成功:'+data.msg);
                    //window.location.href="/image/imagelist";
                } else {
                    alert("上傳失敗:"+data.msg);
                }
            },
            //調用執行后調用的函數
            complete: function(XMLHttpRequest, textStatus){
            },
            //調用出錯執行的函數
            error: function(XMLHttpRequest, textStatus, errorThrown){
                alert(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
            }
        });
    }
</script>
</body>
</html>

這個頁面上同時展示了單文件上傳和多文件上傳

 

2,uploadadd.html

<html lang="en">
<head>
    <script type="text/javascript" language="JavaScript" src="/js/jquery-1.6.2.min.js"></script>
</head>
<body>
<div style="width:100%;height:20px;background:#ffffff;font-size: 16px;" ></div>
<div id="content" style="width:800px;">
    <div style="width:800px;float:left;">
       <!--====================main begin=====================-->
        <div style="width:280px;float:left;background: #eeeeee;padding-left: 10px;padding-top: 10px;">
            單文件上傳<br/>
            說明：不能多選<br/>
            <form id="form_add" method="POST" action="" enctype="multipart/form-data">
            <div id="filelist" style="width: 260px;">
                <div style="width:260px;height:50px;background: #ffff00;padding:2px 5px;">
                <input type="text" style="width:200px;" name="text1" placeholder="文件說明"/><br/>
                <input id="file1" type="file" name="file1" />
                </div>
            </div>
            </form>
            <input type="button" name="gofile" value="追加文件" onclick="go_add()" /><br/><br/>
            <input type="button" name="goupload" value="提交" onclick="go_commit()" />
        </div>
        <!--====================main   end=====================-->
    </div>
</div>
<script>
    //最大上傳文件數量
    var global_file_max = 10;
    //當前表單中的file數量
    var global_file_num = 1;
    //提交動態生成元素的表單
    function go_commit() {
        var postdata = new FormData($("#form_add")[0]);
        //附加上文件表單元素的數量
        postdata.append("num",global_file_num);
    $.ajax({
        type:"POST",
        url:"/file/uploadadded",
        data:postdata,
        //返回數據的格式
        datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
        processData: false,
        contentType: false,
        //成功返回之后調用的函數
        success:function(data){
            if (data.code == 0) {
                alert("success:"+data.msg);
            } else {
                alert("failed:"+data.msg);
            }
        },
        //調用執行后調用的函數
        complete: function(XMLHttpRequest, textStatus){
        },
        //調用出錯執行的函數
        error: function(XMLHttpRequest, textStatus, errorThrown){
            alert(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
        }
    });

    }
    //添加一個文件表單元素
    function go_add() {
        var divcss = {
            "background-color": "#ff0000",
            "width":"260px",
            "height":"50px",
            "padding":"2px 5px"
        };

        if (global_file_num>=global_file_max) {
            alert('已超過上傳文件的數量限制');
            return false;
        }

        global_file_num++;
        var parentdiv=$('<div></div>');        //創建一個div
        parentdiv.attr('id','filediv'+global_file_num);
        parentdiv.css(divcss);    //添加css樣式
        var divhtml = '<input type="text" style="width:200px;" name="text'+global_file_num+'" placeholder="文件說明"/><br/>' +
            '<input id="file'+global_file_num+'" type="file" name="file'+global_file_num+'" />';
        parentdiv.html(divhtml);
        $("#filelist").append(parentdiv);
    }
</script>
</body>
</html>

演示了用jquery動態添加file元素和text元素

 

六，測試效果

1,訪問:

http://127.0.0.1:8080/file/upload

分別測試單文件上傳和多文件上傳:

 

在文件管理器中查看已上傳的文件:

 

 

 2,測試表單中包含多個文件域的上傳:

訪問:

http://127.0.0.1:8080/file/uploadadd

點擊 追加文件，添加兩個file

 

 測試提交后，查看控制台:

filename:file1
filename:file2
filename:file3
text:aaaa
文件名： qtz.jpg
text:bbbb
文件名： qtz2.jpeg
text:ccc
文件名： yellowbee.jpeg

文件名和text說明的對應沒有問題

 

七，查看spring boot的版本

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.3.2.RELEASE)

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Spring Boot 文件上傳 Spring boot 文件上傳與文件轉發 Spring Boot(十七)：使用 Spring Boot 上傳文件 spring boot:actuator的安全配置:使用spring security做ip地址限制(spring boot 2.3.2) 【Spring Boot】關於上傳文件例子的剖析 Spring Boot 文件上傳簡易教程 spring-boot-route（三）實現多文件上傳 Spring boot設置文件上傳大小限制 js XMLHttpRequest + FormData 跨域提交表單上傳文件 spring boot:用redis+lua限制短信驗證碼的發送頻率(spring boot 2.3.2)
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM