基于Spring Boot利用 ajax實(shí)現(xiàn)上傳圖片功能
效果如下:
1.啟動(dòng)類中加入
SpringBoot重寫addResourceHandlers映射文件路徑
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/E/");
}
設(shè)置靜態(tài)資源路徑
2. 表單 前端 頁(yè)面
<input type="file" name="file" id="file">
<p id="url"><img src="" width=200></p>
<input type="button" id="button" value="上傳" >
$(function () {
$("#button").click(function () {
var form = new FormData();
form.append("file", document.getElementById("file").files[0]);
$.ajax({
url: "/stu/upload", //后臺(tái)url
data: form,
cache: false,
async: false,
type: "POST", //類型,POST或者GET
dataType: 'json', //數(shù)據(jù)返回類型,可以是xml、json等
processData: false,
contentType: false,
success: function (data) { //成功,回調(diào)函數(shù)
if (data) {
var pic="/imctemp-rainy/"+data.fileName;
$("#url img").attr("src",pic);
// alert(JSON.stringify(data));
} else {
alert("失敗");
}
},
error: function (er) { //失敗,回調(diào)函數(shù)
alert(JSON.stringify(data));
}
});
})
})
控制器
public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {
File targetFile = new File(filePath);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
FileOutputStream out = new FileOutputStream(filePath +"/"+ fileName);
out.write(file);
out.flush();
out.close();
}
//處理文件上傳
@ResponseBody //返回json數(shù)據(jù)
@RequestMapping(value = "upload", method = RequestMethod.POST)
public JSONObject uploadImg(@RequestParam("file") MultipartFile file,HttpServletRequest request) {
String contentType = file.getContentType();
System.out.print(contentType);
String fileName = System.currentTimeMillis()+file.getOriginalFilename();
String filePath = "D:/E";
JSONObject jo = new JSONObject();//實(shí)例化json數(shù)據(jù)
if (file.isEmpty()) {
jo.put("success", 0);
jo.put("fileName", "");
}
try {
uploadFile(file.getBytes(), filePath, fileName);
jo.put("success", 1);
jo.put("fileName", fileName);
// jo.put("xfileName", filePath+"/"+fileName);
} catch (Exception e) {
// TODO: handle exception
}
//返回json
return jo;
}
總結(jié)
以上所述是小編給大家介紹的基于Spring Boot利用 ajax實(shí)現(xiàn)上傳圖片功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
欄 目:AJAX相關(guān)
下一篇:解決Ajax方式上傳文件報(bào)錯(cuò)"Uncaught TypeError: Illegal invocati
本文標(biāo)題:基于Spring Boot利用 ajax實(shí)現(xiàn)上傳圖片功能
本文地址:http://www.jygsgssxh.com/a1/AJAXxiangguan/11264.html


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 01-11layui的checbox在Ajax局部刷新下的設(shè)置方
- 01-11ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹
- 01-11ajax獲得json對(duì)象數(shù)組 循環(huán)輸出數(shù)據(jù)的
- 01-11解決ajax請(qǐng)求后臺(tái),有時(shí)收不到返回值的
- 01-11詳談ajax返回?cái)?shù)據(jù)成功 卻進(jìn)入error的方
- 01-11解決AJAX返回狀態(tài)200沒有調(diào)用success的問
- 01-11快速解決ajax返回值給外部函數(shù)的問題
- 01-11Ajax實(shí)現(xiàn)動(dòng)態(tài)顯示并操作表信息的方法
- 01-11ajax實(shí)現(xiàn)從后臺(tái)拿數(shù)據(jù)顯示在HTML前端的
- 01-11ajax動(dòng)態(tài)查詢數(shù)據(jù)庫(kù)數(shù)據(jù)并顯示在前臺(tái)
隨機(jī)閱讀
- 01-10C#中split用法實(shí)例總結(jié)
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 01-10delphi制作wav文件的方法
- 04-02jquery與jsp,用jquery
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文


