uploadify插件是一个前台功能提供的一个比较强大的插件，它基于jquery，能通过ajax进行上传，在上传的过程中可以显示进度条，可以前台对文件大小，文件的格式等等进行校验，也能够展现一些比较绚丽的画面。具体详细可以查看官方的demo

1、官方地址：http://www.uploadify.com/

2、下载此js插件，然后把uploadify插件引入到项目中

  1. <script src="<c:url value="/js/uploadify/swfobject.js"/>" type="text/javascript" charset="utf-8"></script> 
  2.     <script src="<c:url value="/js/uploadify/jquery.uploadify.v2.1.0.js"/>" type="text/javascript"              charset="utf-8"> 
  3. </script> 

3、定义file控件

 

  1. <input type="file" id="frontfile" name="frontfile" /> 

4、设置上传事件

 

  1. $(function (){ 
  2.         $("#backfile").uploadify({ 
  3.             'uploader': '/js/uploadify/uploadify.swf?v='+new Date(), 
  4.             'script': 'file_idRegisterUpbackfile.action;jsessionid=<%=session.getId()%>', 
  5.             'fileDataName': 'backfile', //此处是定义上传控件的id
  6.             'cancelImg': 'js/jquery.uploadify-v2.1.0/cancel.png', 
  7.             'folder': 'UploadFile', 
  8.             'auto': true, 
  9.             'buttonImg' : '/p_w_picpaths/diyclaim/liulan_e.jpg', 
  10.             'height' : 25, 
  11.             'width' : 66, 
  12.             'fileDesc':'支持图片格式：jpg，jpeg', //点击上传，文件选择框中显示的文字
  13.             'fileExt':'*.jpg;*.jpeg', 
  14.             'sizeLimit':2*1024*1024, 
  15.             'onError' : function(event, queueID, fileObj,errorObj){ 
  16.                 if(errorObj.type=='File Size') 
  17.                         errorObj.type='文件大小';    
  18.                 alert("图片：" + fileObj.name + " 上传失败。错误信息："+errorObj.type+" 异常");    
  19.             }, 
  20.            'onComplete': function (event, queueID, fileObj, response, data){ 
  21.                         //这里面是回掉函数 
  22.                         var jsonData; 
  23.                         try{ 
  24.                             jsonData=eval（'(' + response + ')');  
  25.                         }catch(e){ 
  26.                         } 
  27.                         showImage(jsonData.oldfileNameAndPath);//得到后台返回来的字符串 
  28.                                              
  29.             } 
  30.         }); 
  31.     }); 

以上是对此控件的粗略使用，

另外使用jquery.lightbox可以实现其他的比较绚的功能，例如可以展示一个图片的缩略图，然后鼠标点击以后可以在弹出层中看大图，然后通过拖动里面的条，可以把图片放大或者缩小等等，还请亲们自行研究。详细可见官方文档。