如何在Jsp上傳圖片

1. 新建一個Dynamic Web Project：

2. 鍵入工程名UploadImage：

3. 選擇Dynamic web module version ：2.5

4. 點擊“Finish”

5. 新建兩個jsp文件：ImageUpload.jsp和ImageUploadHandler.jsp

6. 新建一個類，專門用來處理圖片上傳

新建一個包mytest：

在包下新建一個類FileUpload：

代碼內容：

package mytest;

import java.awt.image.BufferedImage;

import java.io.*;

import java.awt.Image;

import com.sun.image.codec.jpeg.JPEGCodec;

import com.sun.image.codec.jpeg.JPEGImageEncoder;

public class FileUpload

{

public static void uploadImage(String imgFolderPath,String srcFileName,String dstFileName) throws IOException

{

//判斷文件夾image是否存在，若不存在則創建

File folder = new File(imgFolderPath);

System.out.println("function 'uploadFileTest2'-imgFolderPath'"+imgFolderPath);

if(!folder.exists())

{

folder.mkdir();

System.out.println("maked a folder!");

}

File _file = new File(srcFileName); //讀入文件

Image src = javax.imageio.ImageIO.read(_file); //構造Image對象

int wideth=src.getWidth(null); //得到源圖寬

int height=src.getHeight(null); //得到源圖長

BufferedImage tag = new BufferedImage(wideth,height,BufferedImage.TYPE_INT_RGB);

tag.getGraphics().drawImage(src,0,0,wideth,height,null);

FileOutputStream out=new FileOutputStream(dstFileName); //輸出到文件流

JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);

encoder.encode(tag); //JPEG編碼

out.close();

System.out.println("function 'uploadFileTest2'-status:A Image File Saved!");

}

}

發現報錯：

找到代碼的庫Libraries：

打開rt.jar所在文件夾：

復制這個文件：

右鍵粘貼到WEB_INF\lib下：

效果：

沒再報錯。

7. 修改ImageUpload.jsp

說明：這個jsp文件，需要一個能選擇文件的控件<input type=”file”

保存時出現問題：

改3個地方，全部改成gb2312：

8. 修改ImageUploadHandler.jsp

說明：這個jsp文件需要對從ImageUpload.jsp傳過來的文件上傳到服務器，並讀取服務器上的圖片文件，把它顯示出來。

改幾個地方：

（1）引入包及修改編碼gb2312

（2）修改編碼gb2312

（3）修改標題

（4）上傳圖片代碼

<%

String filePath = request.getSession().getServletContext().getRealPath("");//獲取該項目的真實路徑

out.println(filePath+"<br/>");

String photo=request.getParameter("imgUpload");//獲取file控件里的路徑（絕對路徑）

int indexOfLine = photo.lastIndexOf("\\");

String fileName = photo.substring(indexOfLine+1,photo.length());//文件名（含后綴，不包含路徑信息）

String destFilePathAndName = filePath+"\\image\\"+fileName;//要保存文件的路徑

FileUpload.uploadImage(filePath+"\\image\\",photo,destFilePathAndName);//上傳圖片到目的路徑

String relativeFilePath = ".\\image\\"+fileName;//用來顯示圖片的相對路徑

out.println(photo+"<br/>");

out.println(destFilePathAndName+"<br/>");

%>

（5）顯示圖片

上傳的圖片：<img src="<%=relativeFilePath%>" width=100 height=112 border=0 alt="image display"/>

（6）全版布局

9. 運行

選中ImageUpload.jsp這個文件，並點擊“運行”三角形：

出現問題：

看來一開始把版本設置成2.5無效。打開該項目所在目錄：

技巧：右鍵項目，選擇Properties：

看到Loacation：

復制這個路徑，打開“我的電腦”並在地址欄上粘貼，回車：

打開.settings：

使用記事本打開這個XML文檔：

把“jst.web”的version改成2.5

右鍵點項目，刷新一下：

注：也可以安裝一些插件，可以右鍵直接打開文件夾。

10. 重新運行

點擊OK：

選擇“Manually define a new server”，並選擇一個Tomcat（因示例使用Tomcat 6.0，配置時看具體版本而定）

點擊“Add”：

在Browse…選擇安裝Tomcat6.0的路徑，點擊“Finish”，離開這個對話框，並回到上一層對話框，再點擊“Finish”開始運行。

出現問題：

關閉這個文件，重新點擊運行（保證當前打開的文件是ImageUpload.jsp）：

選擇一個文件：

發現沒有提交按鈕，回去修改ImageUpload.jsp：

再次運行，運行后點擊進行刷新：

點擊“提交”：

刪除調試信息及修改圖片大小：

注釋掉out：

加寬圖片：

重新運行：

實際上，會出現圖片能在eclipse內置的瀏覽器中正常顯示，但卻不能在外部瀏覽器中顯示，原因在於，顯示圖片時用的文件必須是已經上傳到服務器的圖片，而不能是服務端的本地文件，而客戶端是不允許直接訪問服務器的本地文件，所以導致了錯誤，因此，在瀏覽器中檢驗一下：

復制選中的URL：

打開IE瀏覽器，在地址欄粘貼並回車：

選擇一個文件：

點擊“提交”：

OK！

注：由於eclipse經常有一些Bug，所以，如果修改的代碼總是不生效，可以考慮下面兩種方法，“嚴酷”程序由低到高：

（一） 停止程序並清除編譯文件

停止程序：

清除編譯文件：

（二） 最狠的莫過於重啟eclipse，不過，這仍不失為一個相當有效而又沒法解釋的好辦法。