使用AJAX實(shí)現(xiàn)上傳文件
本文實(shí)例為大家分享了使用AJAX實(shí)現(xiàn)上傳文件的具體代碼,供大家參考,具體內(nèi)容如下
需求:
在前端頁面選擇文件上傳到服務(wù)器的指定位置
前端代碼
<form id="uploadForm" method="post" enctype="multipart/form-data"> <label >上傳電子書</label> <input type="file" name="file" > <button id="upload" type="button" name="button" >上傳</button> </form>
$("#upload").click(function () { var formData = new FormData($('#uploadForm')[0]); $.ajax({ type: 'post', url: "https://****:8443/fileUpload", //上傳文件的請(qǐng)求路徑必須是絕對(duì)路勁 data: formData, cache: false, processData: false, contentType: false, }).success(function (data) { console.log(data); alert("上傳成功"+data); filename=data; }).error(function () { alert("上傳失敗"); }); });
首先創(chuàng)建一個(gè)FormData實(shí)例,也就是空對(duì)象,將頁面中現(xiàn)有form表單將他初始化。通過AJAX提交給后臺(tái)
后端代碼
@PostMapping(value = "/fileUpload") @ResponseBody public String fileUpload(@RequestParam(value = "file") MultipartFile file, Model model, HttpServletRequest request) { if (file.isEmpty()) { System.out.println("文件為空空"); } String fileName = file.getOriginalFilename(); // 文件名 System.out.println(file.getOriginalFilename()); String suffixName = fileName.substring(fileName.lastIndexOf(".")); // 后綴名 String filePath = "C://pdf//"; // 上傳后的路徑 fileName = UUID.randomUUID() + suffixName; // 新文件名 File dest = new File(filePath + fileName); System.out.println("pdf文件路徑為:"+dest.getPath()); if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); System.out.println("上傳pdf文件+++++++++++"); System.out.println("pdf文件路徑為:"+dest.getPath()); } try { file.transferTo(dest); } catch (IOException e) { e.printStackTrace(); } String filename = "/pdf/" + fileName; return fileName; }
注意
1.@RequestParam(value = “file”) 中的file需要和input中的name屬性一致。
2.提交按鈕類型Type=“Button”如果為“submit”的話,提交完數(shù)據(jù)會(huì)刷新一次頁面。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery Ajax 上傳文件處理方式介紹(推薦)
- 一個(gè)簡(jiǎn)單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
- 使用ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件php版
- ajax(iframe)無刷新提交表單、上傳文件
- jQuery插件ajaxfileupload.js實(shí)現(xiàn)上傳文件
- Ajax serialize() 表單進(jìn)行序列化方式上傳文件
- ajax使用formdata上傳文件流
- jsp+ajax實(shí)現(xiàn)無刷新上傳文件的方法
- 使用FormData進(jìn)行Ajax請(qǐng)求上傳文件的實(shí)例代碼
- Asp.net MVC中使用JQuery插件ajaxFileUpload上傳文件
相關(guān)文章
Echarts教程之通過Ajax實(shí)現(xiàn)動(dòng)態(tài)加載折線圖的方法
這篇文章主要介紹了Echarts教程之通過Ajax實(shí)現(xiàn)動(dòng)態(tài)加載折線圖的方法,需要的朋友可以參考下2018-04-04AJax 學(xué)習(xí)筆記二(onreadystatechange的作用)
初次接觸onreadystatechange這個(gè)事件句柄不知道有何用處,看過一篇文章的介紹之后,終有大致所了解。2010-04-04Ajax實(shí)現(xiàn)模擬關(guān)鍵字智能匹配搜索效果
這篇文章主要介紹了Ajax實(shí)現(xiàn)模擬關(guān)鍵字智能匹配搜索效果,當(dāng)在搜索框輸入內(nèi)容時(shí),根據(jù)關(guān)鍵字匹配,顯示彈出層,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12ajax智能提示+textbox動(dòng)態(tài)生成下拉框示例代碼
ajax智能提示+textbox動(dòng)態(tài)生成下拉框,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-12-12React+ajax+java實(shí)現(xiàn)上傳圖片并預(yù)覽功能
這篇文章主要介紹了React+ajax+java實(shí)現(xiàn)上傳圖片并預(yù)覽功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05Ajax添加數(shù)據(jù)與刪除篇實(shí)現(xiàn)代碼
Hello 大家好!這個(gè)ajax系列教程講到這里已經(jīng)完成50%了.第4篇講了ajax向數(shù)據(jù)庫添加數(shù)據(jù),第5篇講了ajax修改數(shù)據(jù)庫中的數(shù)據(jù).今天我們來講ajax添加數(shù)據(jù)與刪除并存的實(shí)例效果.2010-10-10