閱讀896 返回首頁    go 阿裏雲 go 技術社區[雲棲]

jqm文件上傳,上傳圖片,jqm的表單操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo

最近在論壇中看到，在使用html5中上傳圖片或文件，出現各種問題。這一方麵，我也一直沒有做過，今天就抽出了一點時間來學習一下。現在的示例已經ok了，我就給大家分享一下，希望對大家有幫助。
好吧，我們先看看效果截圖吧：

還行吧，來看頁麵代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>偽專家jqm文件上傳</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>偽專家jqm文件上傳</h1>
  </div>
  <div >
  	<p><b>如有疑問：請加qq群135430763，共同學習！！！</b></p>
  	<p><b>如有疑問：請加qq群135430763，共同學習！！！</b></p>
  	<div >
        <form action="FileServlet" method="post" enctype="multipart/form-data"  data-ajax="false">
            <input type="file" name="fileField"   />
            <input type="submit" name="submit"  value="上傳" />
        </form>
  	</div>
  	<p><b>如有疑問：請加qq群135430763，共同學習！！！</b></p>
  	<p><b>如有疑問：請加qq群135430763，共同學習！！！</b></p>
  </div>
  <div data-role="footer" data-position="fixed">
    <h1>偽專家jqm文件上傳</h1>
  </div>
</div>
</body>
</html>
在看看簡單的servlet代碼：
package com.herman.jqm.servlet;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**
 * @see 上傳圖片或文件FileServlet
 * @author Administrator
 * @date 2014年6月23日10:00:39
 */
public class FileServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    /**
     * 默認構造函數 
     */
    public FileServlet() {
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	@SuppressWarnings("unchecked")
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");	//設置編碼
		//獲得磁盤文件條目工廠
		DiskFileItemFactory factory = new DiskFileItemFactory();
		//獲取文件需要上傳到的路徑
		String path = getServletContext().getRealPath("/");
		//如果沒以下兩行設置的話，上傳大的 文件 會占用 很多內存，
		//設置暫時存放的 存儲室 , 這個存儲室，可以和 最終存儲文件 的目錄不同
		/**
		 * 原理 它是先存到 暫時存儲室，然後在真正寫到 對應目錄的硬盤上， 
		 * 按理來說 當上傳一個文件時，其實是上傳了兩份，第一個是以 .tem 格式的 
		 * 然後再將其真正寫到 對應目錄的硬盤上
		 */
		factory.setRepository(new File(path));
		//設置 緩存的大小，當上傳文件的容量超過該緩存時，直接放到 暫時存儲室
		factory.setSizeThreshold(1024*1024) ;
		//高水平的API文件上傳處理
		ServletFileUpload upload = new ServletFileUpload(factory);
		try {
			//可以上傳多個文件
			List<FileItem> list = (List<FileItem>)upload.parseRequest(request);
			for(FileItem item : list){
				//獲取表單的屬性名字
				String name = item.getFieldName();
				//如果獲取的 表單信息是普通的 文本 信息
				if(item.isFormField()){					
					//獲取用戶具體輸入的字符串 ，名字起得挺好，因為表單提交過來的是 字符串類型的
					String value = item.getString() ;
					request.setAttribute(name, value);
				}else{//對傳入的非 簡單的字符串進行處理 ，比如說二進製的 圖片，電影這些
					/**
					 * 以下三步，主要獲取 上傳文件的名字
					 */
					//獲取路徑名
					String value = item.getName() ;
					//索引到最後一個反斜杠
					int start = value.lastIndexOf("\\");
					//截取 上傳文件的 字符串名字，加1是 去掉反斜杠，
					String filename = value.substring(start+1);
					request.setAttribute(name, filename);
					//真正寫到磁盤上
					//手動寫的
					OutputStream out = new FileOutputStream(new File(path,filename));
					InputStream in = item.getInputStream() ;
					int length = 0 ;
					byte [] buf = new byte[1024] ;
					// in.read(buf) 每次讀到的數據存放在   buf 數組中
					while( (length = in.read(buf) ) != -1){
						//在   buf 數組中 取出數據 寫到 （輸出流）磁盤上
						out.write(buf, 0, length);
					}
					in.close();
					out.flush();
					out.close();
				}
			}
		}catch (Exception e) {
			e.printStackTrace();
		}
		request.getRequestDispatcher("/ok.html").forward(request, response);
	}
}
很簡單吧，好了，就到這裏。同時也歡迎大家多多關注我的博客！
如有疑問：請加qq群135430763，共同學習！！！
資源demo下載路徑：https://download.csdn.net/download/xmt1139057136/7538193
點擊這裏下載

最後更新：2017-04-03 07:57:11

  上一篇：go Myeclipse重裝後的必要配置
  下一篇：go os x 下的strace命令