如何在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，不过，这仍不失为一个相当有效而又没法解释的好办法。