电子相册系统（五）添加图片

1. 功能说明

在添加图片之前，我们需要弹出个带有蒙板的提示框，样式如下。当然我们上传图片的名字不能重复，图片还要放在服务器的指定文件夹下。上传成功之后，我们还要在页面中显示了出来。

2. 构思实现

1)        要想弹出带有蒙板的提示框，那么我们就可借助jQuery的方法来实现，而提示框上的那些，我们需要自己设计个<div/>的标签来实现。

2)        图片的上传，需要用户添加图片的名称，为了避免重复，我们采用UUID的方法后台全名图片名字。一旦用户上传图片成功之后，不仅要写入数据库，同时要PrintWriter的方法，将图片写出到客户端。

3. 具体实现

1)        在html的页面中，我们要设计个<div/>，其中包含了提示框要显示的文本框和相应的信息。

<div id="uploadDiv" title="上传图片" style="display:none"><form action="proUpload" method="post"enctype="multipart/form-data"target="hideframe"><table width="400" border="0" cellspacing="1" cellpadding="10"><tr><td height="25">图片标题：</td><td><input id="title" name="title" type="text" /></td></tr><tr><td height="25">浏览图片：</td><td><input id="file" name="file" type="file" /></td></tr><tr><td colspan="2" align="center"><input type="submit" value="上传" /><input type="reset" value="重设" /></td></tr> </table></form></div>

2)        对于蒙板的显示，我们是通过jQuery来实现的，所以我们还要写个关于这个实现的方法。注意这里调用的标签名就是uploadDiv。

// 打开上传窗口function openUpload(){$("#uploadDiv").show().dialog({modal: true,title: '上传照片',resizable: false,width: 428,height: 220,overlay: {opacity: 0.5 , background: "black"}});}

3)        接下来就来到了实现上传图片的核心地方了，那就是我们要使用Java的I/O来实现文件的上传，还有就是文件的读取。

@WebServlet(urlPatterns="/proUpload")public class ProUploadServlet extends BaseServlet{@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException{Iterator iter = null;String title = null;response.setContentType("text/html;charset=gbk");//获取输出流PrintWriter out = response.getWriter();try{//使用Upload处理上传FileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory);List items = upload.parseRequest(request);iter = items.iterator();//遍历每个表单控件对应的内容while (iter.hasNext()){FileItem item = (FileItem)iter.next();//如果该项是普通表单域if (item.isFormField()){String name = item.getFieldName();if(name.equals("title")){title = item.getString("gbk");}}//如果是需要上传的文件else{String user = (String) request.getSession().getAttribute("curUser");String serverFileName = null;//返回文件名String fileName = item.getName();//取得文件后缀//String suffix = fileName.substring(fileName.lastIndexOf("."));//返回文件类型String contentType = item.getContentType();//只允许上传jpg、gif、png图片if(contentType.equals("image/pjpeg")|| contentType.equals("image/gif")|| contentType.equals("image/jpeg")|| contentType.equals("image/png")){InputStream input = item.getInputStream();serverFileName = UUID.randomUUID().toString();//System.out.println("filename:"+fileName);//判断文件夹是否存在createFile(request,out);FileOutputStream output = new FileOutputStream(getServletContext().getRealPath("/")+ "uploadfiles\\" + serverFileName );//+ suffix);byte[] buffer = new byte[1024];int len = 0;while ((len = input.read(buffer)) > 0){output.write(buffer, 0, len);}input.close();output.close();as.addPhoto(user, title, fileName, serverFileName);//+ suffix);out.write("<script type='text/javascript'>"+ "parent.callback('恭喜你，文件上传成功！')"+ "</script>");}else{out.write("<script type='text/javascript'>"+ "parent.callback('本系统只允许上传"+ "JPG、GIF、PNG图片文件，请重试！')</script>");}}}}catch (FileUploadException e){e.printStackTrace();out.write("<script type='text/javascript'>"+ "parent.callback('处理上传文件出现错误，请重试！')"+ "</script>");}catch(AlbumException ex){ex.printStackTrace();} }/** * 创建文件夹uploadfiles * @param request * @param out */public void createFile(HttpServletRequest request, PrintWriter out){String filePath = request.getSession().getServletContext().getRealPath("uploadfiles");File file =new File(filePath);    //如果文件夹不存在则创建    if  (!file .exists()  && !file .isDirectory())      {           file .mkdir();   } else   {  out.println("alert('系统错误！');");  }  }}