<form action="<%=request.getContextPath()%>/chat" method="post" enctype="multipart/form-data" data-ajax="false" name="form" id="form" target="relnews"> <input type="hidden" name="name" id="name" value="" /> <input type="hidden" name="taskId" id="taskId" value="" /> <input type="file" name="image" id="image" class="photo" onchange="sendImage(this)" /> </form>
<!-- 隱藏域做爲表單提交後頁面不跳轉使用 --> <iframe align="center" frameborder="0" marginheight="0" marginwidth="0" name="relnews" id="hiddenIframe" scrolling="no" style="width: 100%; height: 100%; display: none"> </iframe>
js: function sendMessage() { var text = DWRUtil.getValue("message"); if("" != text){ DWRUtil.setValue("message", ""); Chat.addMessage(text, name, taskId, gotMessages); } }
直接上代碼解釋:java
jar包:commons-io-1.4.jarajax
commons-fileupload-1.2.2.jar服務器
log4j-1.2.14.jar框架
若是參考我寫的框架還須要加入dwr的jar包:dwr.jar工具
(廣告時間:個人action 調用的js 是 用的dwr 提交實現的,有興趣的能夠參考博文http://my.oschina.net/u/1790925/blog/366346)post
這裏個人目的是選擇一張圖片後直接上傳到服務器上,沒有經過submit按鈕提交,同時要把一些文字信息帶入,由於上傳圖片的關鍵要設置this
enctype="multipart/form-data"
而這個設置以後。後臺則沒法經過request方法直接得到文字屬性了。因此後臺取值也採用了特殊的方法。編碼
/** * 原生request處理圖片上傳 * * */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); //獲取請求URL String url = request.getContextPath(); //建立圖片工廠類 DiskFileItemFactory factory = new DiskFileItemFactory(); //建立上傳工具類 ServletFileUpload uploader = new ServletFileUpload(factory); List<FileItem> list = null; try { //格式化request list = uploader.parseRequest(request); } catch (FileUploadException e1) { e1.printStackTrace(); } String name = "";//用戶名 String taskid = "";//任務ID String fileName = "";//文件名稱 for (FileItem item : list) { if (item.isFormField()) { // 處理普通表單域,form表單設置enctype="multipart/form-data" 時 表單中其餘input控件須要經過該方式取值 String field = item.getFieldName();// 表單域名,既參數名稱 if (field.equals("name")) { name = item.getString("UTF-8");// 這裏須要設置頁面的編碼方式,與頁面編碼方式相同 } else if (field.equals("taskId")) { taskid = item.getString("UTF-8");// 同上 } } else { fileName = item.getName();// 文件名稱 int index = fileName.lastIndexOf("\\"); if (index != -1) { fileName = fileName.substring(index + 1); } // 建立一個以當前時間+文件名格式的圖片名稱,如圖片名:image.png → 20150108082222image.png 以確保圖片惟一 SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss"); fileName = sdf.format(new Date()) + fileName; //判斷是否存在圖片文件夾不存在則新建 try { if (!(new File(getServletContext().getRealPath( "/pic")).isDirectory())) { new File(getServletContext().getRealPath( "/pic")).mkdir(); } } catch (SecurityException e) { e.printStackTrace(); } //圖片上傳到服務器路徑下的pic目錄中 String filepath = "pic/" + fileName; try { item.write(new File(getServletContext().getRealPath( "/" + filepath))); } catch (Exception e) { e.printStackTrace(); }// 執行保存 } if (!item.isInMemory()) item.delete(); }