前一篇文章可以看到对jquery uploadify的属性的讲解，这里给出具体的java代码实现，代码基于servlet，实现了上传图片并预览的效果，不多说，上代码


index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--引入jquery.js-->
<script src="scripts/jquery-1.10.2.min.js"></script>  
<!--引入uploadify.js-->
<script src="scripts/jquery.uploadify.min.js" type="text/javascript"></script>
<!--引入uploadify.css-->
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />  
<!--引入自己写的css-->
<link href="css/customer.css" rel="stylesheet" type="text/css" />  

<script type="text/javascript">  
        $(function() {  
        	 $("#upload_org_code").uploadify({
        	 'auto' :true,
        	 'buttonClass':'mybutton',
        	 'buttonCursor':'hand',
        	 'buttonText'    : '选择图片',
        	 'fileSizeLimit' : '2MB',
                 'height'        : 27,
                 'width'         : 80, 
                 'fileTypeExts'  : '*.jpg;*.jpge;*.gif;*.png',
                 'fileTypeDesc'  :'请选择jpg,jpge,jif,png后缀结尾的图片',
                 'progressData':'speed',
                 'queueID':'some_file_queue',
                 'removeCompleted':false,
                 'queueSizeLimit':2,
                 'removeTimeout':1,
                 'swf'           : '${pageContext.request.contextPath}/scripts/uploadify.swf',
                 <!--这是关键，上传后台处理的servlet地址-->
                 'uploader'      : '${pageContext.request.contextPath}/uploadifyServlet',
                 'multi'         : false,
                 //加上此句会重写onSelectError方法【需要重写的事件】
                 'overrideEvents': ['onSelectError', 'onDialogClose','onCancel','onClearQueue'],
                 'onCancel':function(file){
                	console.log(file.name); 
                 },
                 
                 'onClearQueue':function(queueItemCount){
                	 console.log(queueItemCount);
                 },
                 'onDestroy':function(){
                	console.log('destory'); 
                 },
                 'onDialogClose':function(queueData){
                	 console.log(queueData.filesSelected );
                	 console.log(queueData.filesQueued  );
                 },
                 'onUploadSuccess':function(file,data,response){
                     $('#' + file.id).find('.data').html('');
                     console.log('data='+data);
                     $("#upload_org_code_name").val(data);
                     <!--这是关键，预览后台处理的servlet地址-->
                     $("#upload_org_code_img").attr("src","${pageContext.request.contextPath}/getImgServlet?file="+data);  
                     $("#upload_org_code_img").show();
                 },
               
                 //返回一个错误，选择文件的时候触发
                 'onSelectError':function(file, errorCode, errorMsg){
                     switch(errorCode) {
                         case -110:
                             alert("文件 ["+file.name+"] 大小超出系统限制的" + jQuery('#upload_org_code').uploadify('settings', 'fileSizeLimit') + "大小！");
                             break;
                         case -120:
                             alert("文件 ["+file.name+"] 大小异常！");
                             break;
                         case -130:
                             alert("文件 ["+file.name+"] 类型不正确！");
                             break;
                     }
                 },
             });
            
        });  
</script>  
</head>
<body>
<!--用于图片预览的显示-->
<img style="display: none" id="upload_org_code_img" src="" width="100" height="100"/>

<input type="file" name="upload_org_code" id="upload_org_code"/>
<!--自定义的一个queue-->
<div id="some_file_queue">

</div>

 <!--一些操作啦-->
     <a href="javascript:jQuery('#upload_org_code').uploadify('upload','*');">上传</a> 
      <a href="javascript:$('#upload_org_code').uploadify('cancel','*')">取消上传</a>  
      <a href="javascript:$('#upload_org_code').uploadify('destroy')">destory</a>  
      
</body>
</html>


其中，js中定义了上传处理的uploadifyServlet地址，所以下一步就是编写改servlet了

uploadifyServlet.java

public class uploadifyServlet extends HttpServlet {
	
	   private String configPath="d:/p_w_picpath/";
	    
	  public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	        this.doPost(request, response);
	    }
	 
	    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    	  String ret_fileName = null;//返回给前端已修改的图片名称
	    	  request.setCharacterEncoding("UTF-8");
	          response.setContentType("text/html; charset=UTF-8");
	          PrintWriter out = response.getWriter();
	          // 文件保存目录路径
	          String savePath = configPath; 
	   
	          DiskFileItemFactory factory = new DiskFileItemFactory();
	          ServletFileUpload upload = new ServletFileUpload(factory);
	          upload.setHeaderEncoding("UTF-8");
	          try {
	              List<?> items = upload.parseRequest(request);
	              Iterator<?> itr = items.iterator();
	   
	              while (itr.hasNext()) {
	            	  
	                  DiskFileItem item   = (DiskFileItem) itr.next();
	                  String fileName = item.getName();
	                  if(fileName!=null){
	                      ret_fileName  = fileName;
	                  }
	                  if (!item.isFormField()) {
	                	  try {
	                          File uploadedFile = new File(savePath,fileName);
	   
	                          OutputStream os = new FileOutputStream(uploadedFile);
	                          InputStream is = item.getInputStream();
	                          byte buf[] = new byte[1024];// 可以修改 1024 以提高读取速度
	                          int length = 0;
	                          while ((length = is.read(buf)) > 0) {
	                              os.write(buf, 0, length);
	                          }
	                          // 关闭流
	                          os.flush();
	                          os.close();
	                          is.close();
	                      } catch (Exception e) {
	                          e.printStackTrace();
	                      }
	                  }
                    
	              }
	   
	          } catch (FileUploadException e) {
	              e.printStackTrace();
	          }
	          //将已修改的图片名称返回前端
	          out.print(ret_fileName);
	          out.flush();
	          out.close();

	    }
}

上述代码的意思很简单，将上传的文件放入指定的文件夹，并返回图片的名称。


到此为止，上传就结束了，下面是预览。


在onUploadSuccess中，我们得到了上传成功图片的返回的图片名称，其中我们定义了实现预览效果的后台servlet，getImgServlet


下面给出改servlet的代码

public class getImg extends HttpServlet {
	
	   private String configPath="d:/p_w_picpath/";
	    
	  public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	        this.doPost(request, response);
	    }
	 
	    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    	 String file = request.getParameter("file");
	         File pic = new File(configPath+file);
	  
	         FileInputStream fis = new FileInputStream(pic);
	         OutputStream os = response.getOutputStream();
	         try {
	             int count = 0;
	             byte[] buffer = new byte[1024 * 1024];
	             while ((count = fis.read(buffer)) != -1)
	                 os.write(buffer, 0, count);
	             os.flush();
	         } catch (IOException e) {
	             e.printStackTrace();
	         } finally {
	             if (os != null)
	                 os.close();
	             if (fis != null)
	                 fis.close();
	         }
	          
	    }
}

上述代码很简单，得到传过来的文件名之后，直接发送文件流过去，实现图片显示


具体的项目包地址如下，大家可直接下载运行：

http://yun.baidu.com/share/link?shareid=702477080&uk=2836507213