使用AJAX實現上傳文件
本文實例為大家分享了使用ajax實現上傳文件的具體代碼,供大家參考,具體內容如下
需求:
在前端頁面選擇文件上傳到服務器的指定位置
前端代碼
上傳電子書 上傳
$("#upload").click(function () { var formdata = new formdata($('#uploadform')[0]); $.ajax({ type: 'post', url: "https://****:8443/fileupload", //上傳文件的請求路徑必須是絕對路勁 data: formdata, cache: false, processdata: false, contenttype: false, }).success(function (data) { console.log(data); alert("上傳成功"+data); filename=data; }).error(function () { alert("上傳失敗"); }); });
首先創建一個formdata實例,也就是空對象,將頁面中現有form表單將他初始化。通過ajax提交給后臺
后端代碼
@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”的話,提交完數據會刷新一次頁面。