input file文件上傳簡單示例

<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/366346post

這裏個人目的是選擇一張圖片後直接上傳到服務器上,沒有經過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();
		}
相關文章
相關標籤/搜索