1、pom檔案引入依賴

<dependency>
     <groupId>commons-io</groupId>
     <artifactId>commons-io</artifactId>
     <version>2.5</version>
</dependency>
<dependency>
     <groupId>commons-fileupload</groupId>
     <artifactId>commons-fileupload</artifactId>
     <version>1.3.3</version>
</dependency>
 

2、引入js和css

<link rel="stylesheet" type="text/css" href="/libs/bootstrap_fileinput/css/fileinput.min.css">
<script src="/libs/bootstrap_fileinput/js/fileinput.min.js"></script>
<script src="/libs/bootstrap_fileinput/js/fileinput_locale_zh.js"></script>

3、頁面

<div class="card card-info">
    <div class="card-header">
        <h3 class="card-title">商品圖片</h3>
    </div>
    <div class="card-body">
        <a href="" class="form-control" style="border:none;">下載模板</a>
        <input type="file" name="reportFile" id="reportFile" multiple class="file-loading" />
    </div>
</div>
 

4、javascript初始化上傳

jQuery(function($){
    //初始化圖片上傳 引數1:控制元件id、引數2:上傳地址
    initFileInput("reportFile", pt.base+"report/uploadReport");

});

//初始化fileinput控制元件（第一次初始化）
function initFileInput(ctrlName, uploadUrl) {
        var control = $('#' + ctrlName);
        //初始化上傳控制元件的樣式
        control.fileinput({
            language: 'zh',                                         //設定語言
            uploadUrl: uploadUrl,                                   //上傳的地址
            allowedFileExtensions: ['jpg', 'gif', 'png', 'pdf'],    //接收的檔案字尾
            showUpload: true,                                       //是否顯示上傳按鈕
            showRemove : true,                                      //顯示移除按鈕
            showPreview : true,                                     //是否顯示預覽
            showCaption: false,                                     //是否顯示標題
            browseClass: "btn btn-primary",                         //按鈕樣式
            uploadAsync: true,                                      //預設非同步上傳
            //dropZoneEnabled: false,                               //是否顯示拖拽區域
            //minImageWidth: 50,                                    //圖片的最小寬度
            //minImageHeight: 50,                                   //圖片的最小高度
            //maxImageWidth: 1000,                                  //圖片的最大寬度
            //maxImageHeight: 1000,                                 //圖片的最大高度
            //maxFileSize: 0,                                       //單位為kb，如果為0表示不限制檔案大小
            //minFileCount: 0,
            maxFileCount: 3,                                       //表示允許同時上傳的最大檔案個數
            enctype: 'multipart/form-data',
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "選擇上傳的檔案數量({n}) 超過允許的最大數值{m}！",
            uploadExtraData:function (previewId, index) {           //傳參
                var data = {
                    "reportGroupId": $('#lbl_groupId').html(),      //此處自定義傳參
                };
                return data;
            }
        });

        //匯入檔案上傳完成之後的事件
        control.on('fileuploaded', function(event, data, previewId, index){
            var response = data.response;
            $.each(response,function(id,path){//上傳完畢，將檔名返回
                console.log("path:"+path.pathUrl);
                $("#form").append("<input class='imgClass' name='filePath' type='hidden' value='"+path.pathUrl+"'>");
            });

        });
    }
 

5、控制層

package com.st.project.controller;

import org.apache.commons.io.FilenameUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.*;

import static com.st.project.common.DateUtil.getCurrentTime;


/**
 * 檔案上傳Controller
 */
@Controller
@RequestMapping("/report")
public class UploaderController {
    private static Logger logger= LoggerFactory.getLogger(UploaderController.class);
    @Value("${portals.upload.image.path}")
    private String imagePath; //圖片儲存路徑
    private String userId="who";  //登陸使用者

    @PostMapping("/uploadReport")
    @ResponseBody
    public  List<Map<String,String>> upload(@RequestParam MultipartFile[] reportFile,HttpServletRequest request,HttpServletResponse response) throws IOException{
        String day = getCurrentTime("yyyyMMdd");//獲取當前天
        String realPath =imagePath; //圖片儲存路徑
        File file = new File(realPath);
        if (!file.exists()) {//資料夾不存在 建立資料夾
            file.mkdirs();
        }
        response.setContentType("text/plain; charset=UTF-8");
        List<Map<String,String>> list = new ArrayList<Map<String,String>>();
        String originalFilename = null;
        for(MultipartFile myfile : reportFile){
            Map<String,String> map = new HashMap<String,String>();
            if(myfile.isEmpty()){
                logger.info("請選擇檔案後上傳!");
                return null;
            }else{
                originalFilename = myfile.getOriginalFilename();
                String extension =FilenameUtils.getExtension(originalFilename);
                if("jpg".equalsIgnoreCase(extension)||"png".equalsIgnoreCase(extension)){
                    originalFilename=userId+"_"+System.currentTimeMillis()+"."+FilenameUtils.getExtension(originalFilename);
                    try {
                        myfile.transferTo(new File(realPath, originalFilename));
                        //儲存檔案路徑
                        map.put("pathUrl",originalFilename);

                        list.add(map);
                        logger.info("load success " + request.getContextPath()+File.separator+"upload"+File.separator+day+File.separator+originalFilename);
                        logger.info("leaving upload!");
                    }catch (Exception e) {
                        logger.info("檔案[" + originalFilename + "]上傳失敗,堆疊軌跡如下");
                        e.printStackTrace();
                        logger.info("檔案上傳失敗，請重試！！");
                        return null;
                    }
                }else{
                    logger.info("load success 只支援jpg,png格式");
                }
            }
        }
        return list;
    }

}