最近在論壇中看到，在使用html5中上傳圖片或檔案，出現各種問題。這一方面，我也一直沒有做過，今天就抽出了一點時間來學習一下。現在的樣本已經ok了，我就給大家分享一下，希望對大家有協助。
好吧，我們先看看效果吧：
還行吧，來看頁面代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script src="http://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 class="ui-content"> <p><b>如有疑問：請加qq群135430763，共同學習！！！</b></p> <p><b>如有疑問：請加qq群135430763，共同學習！！！</b></p> <div class="file-box"> <form action="FileServlet" method="post" enctype="multipart/form-data" data-ajax="false"> <input type="file" name="fileField" id="fileField" /> <input type="submit" name="submit" class="btn" 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);}}很簡單吧，好了，就到這裡。同時也歡迎大家多多關注我的部落格！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
