Maven項(xiàng)目web多圖片上傳及格式驗(yàn)證的實(shí)現(xiàn)
先來(lái)展示一下效果

客戶(hù)在添加的時(shí)候進(jìn)入添加頁(yè)面,需要上傳文件時(shí)的相關(guān)頁(yè)面及代碼
注:前端頁(yè)面重要代碼,multiple的作用是支持多圖片上傳,此處點(diǎn)擊事件一定要使用onchange事件,切記不要誤用onclick事件??!

注:<c:forTokens>標(biāo)簽的作用是以 delims 中的值分割循環(huán)遍歷
以下為前端頁(yè)面對(duì)應(yīng)的onchange事件的代碼及解析
//jQuery函數(shù) 對(duì)應(yīng)上面的onchange事件
function uploadFile() {
//由于該JSP頁(yè)面只有一個(gè)表單,因此只需要定義下標(biāo)為0即可指定當(dāng)前表單
let formData = new FormData($("form")[0]);
//關(guān)鍵代碼:ajax異步上傳圖片
$.ajax({
url: "uploadFile",//此處對(duì)應(yīng)controller控制層中RequestMapping注解中的值
data: formData,//需要上傳的表單數(shù)據(jù)
type: "post",//此處要用post方式上傳,原因是get方式對(duì)上傳文件大小有限制
//processData 默認(rèn)為true,當(dāng)設(shè)置為true的時(shí)候,jquery ajax 提交的時(shí)候不會(huì)序列化 data,而是直接使用data
processData: false,
//ajax 中 contentType 設(shè)置為 false 是為了避免 JQuery 對(duì)其操作,從而失去分界符,而使服務(wù)器不能正常解析文件。
contentType: false,
success: function (msg) {
//判斷校驗(yàn)上傳文件的格式是否為常用圖片類(lèi)型\
let str = "";
let split = msg.split(",");//用逗號(hào)切割 為數(shù)組
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設(shè)置為false,并打破循環(huán)
flag = false;
break;
}
//循環(huán)遍歷數(shù)組拼接字符串,src中需要添加虛擬路徑
str += '<img src="/img/' + split[i] + '" width="50" height="50">';
}
if (flag) {
$("[name=img]").val(msg)
$("#sp1").html(str)
} else {
alert("上傳圖片格式錯(cuò)誤!!")
$("[name=img]").val("")//清空之前的代碼,后臺(tái)JSR303自動(dòng)校驗(yàn)不能為空
}
}
})
}
接下來(lái)看一下后臺(tái)controller層的圖片上傳代碼及解析
//@RequestMapping是一個(gè)用來(lái)處理請(qǐng)求地址映射的注解,可用于類(lèi)或方法上。
//@RequestParam:將請(qǐng)求參數(shù)綁定到后臺(tái)控制器的方法參數(shù)上(是springmvc中接收普通參數(shù)的注解)(以此確保和前端頁(yè)面name屬性中的值一致)
@RequestMapping("uploadFile")
@ResponseBody //加上 @ResponseBody 后,會(huì)直接返回 json 數(shù)據(jù)。
public String uploadFile(@RequestParam("file") MultipartFile[] files) throws IOException {
//要存放圖片的本機(jī)地址
String path = "D://img";
String[] fileNames = new String[files.length];
String imgs = "";
for (int i = 0; i < fileNames.length; i++) {
//UUID用于隨機(jī)生成不重復(fù)的文件名
// getOriginalFilename()該方法用于獲取前臺(tái)上傳文件的名稱(chēng),和UUID做此處理確保上傳的文件名唯一
fileNames[i] = UUID.randomUUID().toString() + files[i].getOriginalFilename();
File file = new File(path, fileNames[i]);
files[i].transferTo(file);//把文件路徑所指向的文件上傳到對(duì)應(yīng)的目錄下。
imgs += "," + fileNames[i];
}
//截取imgs頭部多出來(lái)的逗號(hào)
imgs = imgs.substring(1);
return imgs;
}
以上就為 Maven項(xiàng)目web多圖片上傳+上傳文件的格式驗(yàn)證
到此這篇關(guān)于Maven項(xiàng)目web多圖片上傳及格式驗(yàn)證的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Maven web多圖片上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
一個(gè)Java中BigDecimal的問(wèn)題記錄
這篇文章主要給大家介紹了關(guān)于Java中一個(gè)BigDecimal問(wèn)題的相關(guān)資料,通過(guò)文中介紹的方法可以很方便的解決BigDecimal進(jìn)行計(jì)算的時(shí)候不管怎么計(jì)算,最后得到的值都沒(méi)有變化的問(wèn)題,需要的朋友可以參考下2021-11-11
簡(jiǎn)單的java socket客戶(hù)端和服務(wù)端示例
這篇文章主要介紹了java的socket客戶(hù)端和服務(wù)端示例,大家參考使用吧2014-01-01
Java實(shí)現(xiàn)統(tǒng)計(jì)文檔中關(guān)鍵字出現(xiàn)的次數(shù)
這篇文章主要為大家分享了利用Java語(yǔ)言實(shí)現(xiàn)統(tǒng)計(jì)關(guān)鍵字在文檔中出現(xiàn)的次數(shù)的方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2022-05-05
淺析Java 常用的 4 種加密方式(MD5+Base64+SHA+BCrypt)
這篇文章主要介紹了Java 常用的 4 種加密方式(MD5+Base64+SHA+BCrypt),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
深入理解MyBatis中的一級(jí)緩存與二級(jí)緩存
這篇文章主要給大家深入的介紹了關(guān)于MyBatis中一級(jí)緩存與二級(jí)緩存的相關(guān)資料,文中詳細(xì)介紹MyBatis中一級(jí)緩存與二級(jí)緩存的工作原理及使用,對(duì)大家具有一定的參考性學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-06-06
Java Swing GridBagLayout網(wǎng)格袋布局的實(shí)現(xiàn)
這篇文章主要介紹了Java Swing GridBagLayout網(wǎng)格袋布局的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
JAVA Comparator 和 Comparable接口使用方法
本文介紹了Java中Comparable和Comparator接口的使用,包括它們的定義、方法和應(yīng)用場(chǎng)景,Comparable用于定義類(lèi)的自然排序規(guī)則,而Comparator提供了一種靈活的方式來(lái)定義對(duì)象之間的排序規(guī)則,無(wú)需修改類(lèi)本身,感興趣的朋友一起看看吧2025-03-03

