站長資訊網(wǎng)html5圖片上傳【文件上傳】，在網(wǎng)上找了很多資料，主要也就2種
1.from表單提交的方式
<form action="pushUserIcon" method="post" enctype="multipart/form-data"> <table> <tr> <td width="50" align=left>圖片：</td> <td><input type="file" name="file"/></td> </tr> <tr> <td width="50" align="left">用戶id：</td> <td><input type="text" name="userId"/></td> </tr> <tr> <td><input type="submit"> </td> </tr> </table> </form>
注意： enctype="multipart/form-data" 必須要填
1.1.Java頁面直接提交：
@RequestMapping(value="/pushUserIcon",method=RequestMethod.POST) @ResponseBody public String pushUserIcon(HttpServletRequest request, HttpServletResponse response) throws IOException,BaseException { String result = null; String userId = request.getParameter("userId"); try{ //轉(zhuǎn)型為MultipartHttpRequest(重點的所在) MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; //獲得第1張圖片（根據(jù)前臺的name名稱得到上傳的文件） MultipartFile file = multipartRequest.getFile("file"); result = uploadImageServic.uploadFile(file, request, userId); System.out.println("result:" + result); response.setContentType("text/html;charset=utf8"); response.getWriter().write("result:" + result); }catch(Exception e){ BaseException baseException = new BaseException(e); baseException.setErrorMsg("Upload API Exception"); throw baseException; } return null; }
1.2.原生js 和jQuery的網(wǎng)上有很多，這里就不多說了。
1.2.1. fromData創(chuàng)建的兩種方式
var formData = new FormData($("#myForm")[0]);//用form 表單直接 構(gòu)造formData 對象; 就不需要下面的append 方法來為表單進行賦值了。 //var formData = new FormData();//構(gòu)造空對象，下面用append 方法賦值。 // formData.append("policy", ""); // formData.append("signature", ""); // formData.append("file", $("#file_upload")[0].files[0]);
2.不用from表單提交：
<table style="border: 1px solid black; width: 100%"> <tr> <td width="50" align=left>圖片：</td> <td><input type="file" id="imageFile" name="img" multiple="multiple"/></td> <td> <input type="button" value="調(diào)用" onclick="pushImg()" /> </td> </tr> </table>
HTML就這些，我想大家應(yīng)該都能看懂，下面就要說說這2種提交方式，Ajax是如何編碼？【from表單提交方式也可以使用js或者直接提交頁面刷新】
Ajax編碼也有2種：
1.原生js
function sub() { var file = document.getElementById("imageFile"); var files = file.files; for(var i = 0 ; i < files.length;i++) { uploadFile(files[i]); } } var xhr = null; function uploadFile(file) { xhr = new XMLHttpRequest(); /* xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); */ xhr.open("post", "upload/", true); //訪問控制器是upload，后面必須加'/'否則會報錯"org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...",但是如果是多級的URL【例如XX/XXX/00/upload/0】又沒問題了. var fd = new FormData(); fd.append("userID", "1"); fd.append("errDeviceType", "001"); fd.append("errDeviceID", "11761b4a-57bf-11e5-aee9-005056ad65af"); fd.append("errType", "001"); fd.append("errContent", "XXXXXX"); fd.append("errPic", file); xhr.send(fd); xhr.onreadystatechange = cb; } function cb() { if(xhr.status == 200) { var b = xhr.responseText; if(b == "success"){ alert("上傳成功！"); }else{ alert("上傳失??！"); } } }
2.jquery
function pushImg(obj) { debugger; var url = "upload/"; //訪問控制器是upload，后面必須加'/'否則會報錯"org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...",但是如果是多級的URL【例如XX/XXX/00/upload/0】又沒問題了. var param = $("#errorParameter").val(); var files = $("#imageFile").get(0).files[0]; //獲取file控件中的內(nèi)容 var fd = new FormData(); fd.append("userID", "1"); fd.append("errDeviceType", "001"); fd.append("errDeviceID", "11761b4a-57bf-11e5-aee9-005056ad65af"); fd.append("errType", "001"); fd.append("errContent", "XXXXXX"); fd.append("errPic", files); $.ajax({ type: "POST", contentType:false, //必須false才會避開jQuery對 formdata 的默認處理 , XMLHttpRequest會對 formdata 進行正確的處理 processData: false, //必須false才會自動加上正確的Content-Type url: url, data: fd, success: function (msg) { debugger; var jsonString = JSON.stringify(msg); $("#txtTd").text(jsonString) alert(jsonString); }, error: function (msg) { debugger; alert("error"); } }); }
現(xiàn)在前端的就應(yīng)該差不多了，現(xiàn)在就是接口了，我的參數(shù)和訪問路徑都好了，現(xiàn)在就差接口服務(wù)了：
spring mvc框架：
@RequestMapping(value = { "upload" }) public void pushErrorData(HttpServletRequest request, HttpServletResponse response) throws BaseException { String userID=request.getParameter("userID"); // 轉(zhuǎn)型為MultipartHttpRequest(重點的所在)這個就是上面ajax中提到如果直接訪問此接口而不加"/"，此轉(zhuǎn)型就會報錯 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; //MultipartFile file = multipartRequest.getFiles("errPic");//獲取文件集合 對應(yīng) jquery $("#imageFile").get(0).files // 獲得第1張圖片（根據(jù)前臺的name名稱得到上傳的文件） MultipartFile file = multipartRequest.getFile("errPic"); //對應(yīng) jquery $("#imageFile").get(0).files[index] Map<String, Object> map = new HashMap<String, Object>(); if (null!=file && !file.isEmpty()) { try { map = Common.uploadFile(file); } catch (IOException e) { BaseException baseException = new BaseException(e); //baseException.setErrorMsg(imgErrorMsg); throw baseException; } } } /** * 圖片上傳 * * @param file * @return * @throws IOException * @throws BaseException */ public static Map<String, Object> uploadFile(MultipartFile file) throws IOException, BaseException { String fail = ConfigBundleHelper.getValue("busConfig", "fail");//上傳失敗狀態(tài) String success = ConfigBundleHelper.getValue("busConfig", "success");//上傳成功狀態(tài) String errorMsg = ConfigBundleHelper.getValue("busConfig","imgErrorMsg");//上傳錯誤信息 String filePath = ConfigBundleHelper.getValue("busConfig", "filePath");//上傳路徑，本來是相對路徑，但是在發(fā)布后路徑會創(chuàng)建在tomcat的bin目錄下，所以接口上傳的路徑是一個難題，我用的是絕對路徑，等到發(fā)布到Linux環(huán)境中，通過配置文件修改路徑為Linux中的資源地址【防止工程刪除而資源文件不會丟失】，然后重新發(fā)布工程時再通過Linux的命令把我們需要的資源文件導(dǎo)入到我們發(fā)布的工程項目中。 String size = ConfigBundleHelper.getValue("busConfig", "fileSize"); String interfaceService = ConfigBundleHelper.getValue("busConfig", "interfaceService"); long maxFileSize = (Integer.valueOf(size)) * 1024 * 1024; String suffix = file.getOriginalFilename().substring( file.getOriginalFilename().lastIndexOf(".")); long fileSize = file.getSize(); Map<String, Object> map = new HashMap<String, Object>(); if (suffix.equals(".png") || suffix.equals(".jpg")) { if (fileSize < maxFileSize) { // System.out.println("fileSize"+fileSize); String fileName = file.getOriginalFilename(); fileName = new String(fileName.getBytes("ISO-8859-1"), "UTF-8"); File tempFile = new File(filePath, new Date().getTime() + fileName); try { if (!tempFile.getParentFile().exists()) { tempFile.getParentFile().mkdirs();//如果是多級文件使用mkdirs();如果就一層級的話，可以使用mkdir() } if (!tempFile.exists()) { tempFile.createNewFile(); } file.transferTo(tempFile); } catch (IllegalStateException e) { BaseException baseException = new BaseException(e); baseException.setErrorMsg(errorMsg); throw baseException; } map.put("SUCESS", success); map.put("data",interfaceService + filePath + new Date().getTime() + tempFile.getName()); } else { map.put("SUCESS", fail); map.put("data", "Image too big"); } } else { map.put("SUCESS", fail); map.put("data", "Image format error"); } return map; }
這是我在工作中所遇到到問題，分享給大家，希望大家不會在這個問題上花費大量的時間。謝謝
