以前整理過SSM的文件上傳,此次直接用代碼了。
前臺頁面和js前端
//form表單 <form id= "uploadForm" enctype="multipart/form-data"> <input type="file" name="uploadfile" id="uploadfile"/> <input type="button" value="上傳" onclick="doUpload()" class="btn btn-success fileinput-button"/> <input type="hidden" name="pictureCertificate" id="pictureCertificate" value=""> </form> //js代碼 function doUpload() { /*var formData = new FormData(); formData.append("uploadfile", document.getElementById("uploadfile").files[0]);*/ var formData = document.getElementById("uploadfile").files[0]; // js 獲取文件對象 if (typeof (formData) == "undefined" || formData.size <= 0) { alert("請選擇圖片!"); return; } else { var formData = new FormData(); formData.append("uploadfile", document.getElementById("uploadfile").files[0]); } //var formData = new FormData($( "#uploadForm" )[0]); //alert(formData); $.ajax({ url: '<%=basePath%>/creditBill/fileUpload.do' , type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returndata) { //$("#pictureCertificate").val(returndata); if(returndata.code == "3") { alert("上傳圖片格式不正確!"); } else if (returndata.code == "0") { alert("上傳文件不得大於500k!"); } else if (returndata.code == "404" || returndata.code == "1") { alert("上傳憑證失敗!"); } else { alert("上傳憑證成功!"); $("#pictureCertificate").val(returndata.path); } }, error: function (returndata) { alert("上傳憑證失敗!"); } }); }
後臺代碼linux
/** * 圖片上傳 * @param * @param uploadfile * @param request * @return */ @RequestMapping("/fileUpload") @ResponseBody public UploadResult handleFormUpload(@RequestParam("uploadfile") List<MultipartFile> uploadfile, HttpServletRequest request) { UploadResult result = new UploadResult(); //判斷上傳文件是否存在 if (!uploadfile.isEmpty() && uploadfile.size() > 0) { //循環輸出上傳的文件 for (MultipartFile file : uploadfile) { //獲取上傳文件的原始名稱 String oringinalFilename = file.getOriginalFilename(); //獲取源文件名後綴 String prefixName = FilenameUtils.getExtension(oringinalFilename); int fileSize = 500000; //圖片限制在500k之內 if(file.getSize() > fileSize) { result.setCode("0"); return result; } else if(prefixName.equalsIgnoreCase("jpg") || prefixName.equalsIgnoreCase("png") || prefixName.equalsIgnoreCase("jpeg") || prefixName.equalsIgnoreCase("pneg")) { //設置上傳文件的保存地址目錄 String dirPath = request.getSession().getServletContext().getRealPath("/fileupload/"); //區分windows和linux的\ 和 / //String dirPath = "E:"+System.getProperty("file.separator")+"uploadfile" + System.getProperty("file.separator"); //String dirPath = System.getProperty("file.separator") + "usr" + System.getProperty("file.separator") + "local" // + System.getProperty("file.separator")+"imgbak"+System.getProperty("file.separator"); System.out.println("dirpath==" + dirPath); File filePath = new File(dirPath); //若是文件地址不存在 則建立目錄 if (!filePath.exists()) { filePath.mkdirs(); } //使用時間格式從新命名 String newFilename = VeDate.getNo(4) + "."+prefixName; System.out.println("/fileupload/" + newFilename); try { //使用MultipartFilr接口的方法完成文件上傳到指定位置 file.transferTo(new File(dirPath + newFilename)); String filepath = "/fileupload/" + newFilename; result.setPath(filepath); } catch (IOException e) { result.setCode("1"); return result; } } else { System.out.println("上傳圖片格式不正確"); result.setCode("3"); return result; } } //上傳成功 return result; } else { result.setCode("404"); return result; } }
UploadResult 實體類ajax
/** * @author * @version V1.0 * @Description: * @date 2018/1/23 17:03 */ public class UploadResult { /** * 錯誤代碼 */ private String code; /** * 上傳文件路徑 */ private String path; //…… }
工做總結,都是文件上傳,只是狀況不一樣,原本想用前端文件上傳的框架,結果半天都不行,就用了Ajax的上傳方式,結果還好。windows