今天使用SmartUpload組件實現圖片的上傳，卻怎麼也獲取不到上傳的圖片，沒有異常和報錯信息，找了項目下文件的保存路徑下也沒有。遇到這種情況其實是我的jsp頁面的input標籤裏沒有“name”屬性。
這是錯誤的代碼：
控制檯沒有錯誤信息提示，但是輸出 文件數量爲0
這種情況下，servlet是接收不到form表單提交的參數的。其實我這麼做也是有道理的，在這裏我踩了一個坑，本來以爲使用smartUpload時沒有使用到“name”屬性，不用request.getParameter()來獲取參數，所以就不寫，事實上smartUpload中的upload方法中還是通過"name"來獲取參數的，具體可以去看一下源碼:
貼兩段smartUpload中的upload方法的代碼
可看出upload方法中從請求的頭信息中是否包含“filename”,也就是是否包含文件，然後再取出字段“name”屬性對應的值爲String s3
下面這段代碼是將獲取到的文件信息，設置到file對象中
所以在使用smartUpload的時候，input標籤的“name”屬性該寫還是得寫上，下面貼一下完整代碼：
由於在做圖片預覽是沒有獲取的圖片的真實路徑，所有加入了script腳本
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1">--> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <title>水果專家後臺管理</title> </head> <body> <div class="preview"> <img id="previewImg" src=""> <div id="imgPath">${result}</div> </div> <form action="ftp.action" method="post" enctype="multipart/form-data">
<input id="myFile" name="myFile" class="input-lg" type="file">
<input type="submit" name="post" value="上傳"/></form><script> //判斷ie瀏覽器的版本 function getIeVersion() { var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判斷是否IE<11瀏覽器 var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判斷是否IE的Edge瀏覽器 var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; if(isIE) { var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); reIE.test(userAgent); var fIEVersion = parseFloat(RegExp["$1"]); if(fIEVersion == 7) { return 7; } else if(fIEVersion == 8) { return 8; } else if(fIEVersion == 9) { return 9; } else if(fIEVersion == 10) { return 10; } else { return 6;//IE版本<=7 } } else if(isEdge) { return 'edge';//edge } else if(isIE11) { return 11; //IE11 }else{ return -1;//不是ie瀏覽器 } } //獲取上傳文件的真實路徑 $("#myFile").change(function () { var myFile = document.getElementById("myFile"); var previewImg = document.getElementById("previewImg"); var imgPath = document.getElementById("imgPath"); //取得瀏覽器的userAgent字符串 var userAgent = navigator.userAgent; //判斷是否是IE瀏覽器 var IE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; // alert("IE瀏覽器版本："+getIeVersion()); //判斷是否支持FileReader對象 if(window.FileReader){ var fileReader = new FileReader(); fileReader.readAsDataURL(myFile.files[0]); fileReader.onload = function (ev) { var src = ev.target.result; // imgPath.innerHTML = src; previewImg.src = src; } }else if (1==1) { alert("IE瀏覽器版本："+getIeVersion()); // //ie8 // file.select(); // //ie下獲取文件真實路徑 // var realPath = document.selection.createRange().text; // if(getIeVersion() == 6){ // previewImg.src = realPath; // } }else{ alert("IE瀏覽器版本："+getIeVersion()); }//isIE end })</script></body></html>
下邊是servlet的代碼：
public class FtpServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // request.getParameter() String filePath = getServletContext().getRealPath("/") + "upload"; File file = new File(filePath); if(!file.exists()){ file.mkdir(); } //初始化smartUpload SmartUpload smartUpload = new SmartUpload(); smartUpload.initialize(getServletConfig(),request,response); //設置文件上傳的最大限制 smartUpload.setMaxFileSize(1024*1024*10); //設置文件上傳的類型 smartUpload.setAllowedFilesList("png,jpg,gif"); try { smartUpload.upload(); // String getFileName = smartUpload.getFiles().getFile(0).getFileName(); System.out.println("長傳文件的數量："+smartUpload.getFiles().getCount()); smartUpload.save(filePath);//保存路徑 } catch (SmartUploadException e) { e.printStackTrace(); } String result = "上傳成功"; request.setAttribute("result",result); request.getRequestDispatcher("/index.jsp").forward(request,response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } }
上一篇文章講到做爲後端開發人員怎樣搭建頁面，就是上別的網站把代碼copy下來，但有時候，遇到特別複雜的網站，就沒有那麼容易了copy了，這時候正確的開發姿勢就是使用bootstrap框架，自己快速的去搭建頁面了，不用再自己去寫css了，其實我上面的代碼也引入了bootstrap框架，只是沒有大動作，下一篇文章準備總結一下bootstrap框架的使用。