Maven項目web多圖片上傳及格式驗證的實現

先來展示一下效果

客戶在添加的時候進入添加頁面,需要上傳文件時的相關頁面及代碼

:前端頁面重要代碼,multiple的作用是支持多圖片上傳,此處點擊事件一定要使用onchange事件,切記不要誤用onclick事件!!

 註:<c:forTokens>標簽的作用是以 delims 中的值分割循環遍歷

以下為前端頁面對應的onchange事件的代碼及解析

 //jQuery函數 對應上面的onchange事件
    function uploadFile() {
        //由於該JSP頁面隻有一個表單,因此隻需要定義下標為0即可指定當前表單
        let formData = new FormData($("form")[0]);
        //關鍵代碼:ajax異步上傳圖片
        $.ajax({
            url: "uploadFile",//此處對應controller控制層中RequestMapping註解中的值
            data: formData,//需要上傳的表單數據
            type: "post",//此處要用post方式上傳,原因是get方式對上傳文件大小有限制
            //processData 默認為true,當設置為true的時候,jquery ajax 提交的時候不會序列化 data,而是直接使用data
            processData: false,
            //ajax 中 contentType 設置為 false 是為瞭避免 JQuery 對其操作,從而失去分界符,而使服務器不能正常解析文件。
            contentType: false,
            success: function (msg) {
                //判斷校驗上傳文件的格式是否為常用圖片類型\
                let str = "";
                let split = msg.split(",");//用逗號切割 為數組
                let flag = false;
                for (let i = 0; i < split.length; i++) {
                    if (split[i].endsWith(".jpg") || split[i].endsWith(".png") || split[i].endsWith(".bmp") || split[i].endsWith(".jpeg") || split[i].endsWith(".gif")) {
                        flag = true;
                    } else {
                        //一旦不滿足上面的條件,就將旗幟flag設置為false,並打破循環
                        flag = false;
                        break;
                    }
                    //循環遍歷數組拼接字符串,src中需要添加虛擬路徑
                    str += '<img src="/img/'%20+%20split[i]%20+%20'" width="50" height="50">';
                }
                if (flag) {
                    $("[name=img]").val(msg)
                    $("#sp1").html(str)
                } else {
                    alert("上傳圖片格式錯誤!!")
                    $("[name=img]").val("")//清空之前的代碼,後臺JSR303自動校驗不能為空
                }
            }
        })
    }

接下來看一下後臺controller層的圖片上傳代碼及解析

//@RequestMapping是一個用來處理請求地址映射的註解,可用於類或方法上。
//@RequestParam:將請求參數綁定到後臺控制器的方法參數上(是springmvc中接收普通參數的註解)(以此確保和前端頁面name屬性中的值一致)
    @RequestMapping("uploadFile")
    @ResponseBody //加上 @ResponseBody 後,會直接返回 json 數據。
    public String uploadFile(@RequestParam("file") MultipartFile[] files) throws IOException {
        //要存放圖片的本機地址
        String path = "D://img";
        String[] fileNames = new String[files.length];
        String imgs = "";
        for (int i = 0; i < fileNames.length; i++) {
            //UUID用於隨機生成不重復的文件名
            // getOriginalFilename()該方法用於獲取前臺上傳文件的名稱,和UUID做此處理確保上傳的文件名唯一
            fileNames[i] = UUID.randomUUID().toString() + files[i].getOriginalFilename();
            File file = new File(path, fileNames[i]);
            files[i].transferTo(file);//把文件路徑所指向的文件上傳到對應的目錄下。
            imgs += "," + fileNames[i];
        }
        //截取imgs頭部多出來的逗號
        imgs = imgs.substring(1);
        return imgs;
    }

以上就為 Maven項目web多圖片上傳+上傳文件的格式驗證

到此這篇關於Maven項目web多圖片上傳及格式驗證的實現的文章就介紹到這瞭,更多相關Maven web多圖片上傳內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: