Uploadify v3.2.1 上传图片并预览

前端JSP：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<script type= "text/javascript" >                              $( function () {                  $( "#upload_org_code" ).uploadify({                      'height'         : 27,                      'width'          : 80,                       'buttonText'     :  '选择图片' ,                      'swf'            :  '${pageContext.request.contextPath}/js/uploadify/uploadify.swf' ,                      'uploader'       :  '${pageContext.request.contextPath}/uploadIMGSerlet' ,                      'auto'           :  true ,                      'multi'          :  false ,                      'removeCompleted' : false ,                      'cancelImg'      :  '${pageContext.request.contextPath}/js/uploadify/uploadify-cancel.png' ,                      'fileTypeExts'   :  '*.jpg;*.jpge;*.gif;*.png' ,                      'fileSizeLimit'  :  '2MB' ,                      'onUploadSuccess' : function (file,data,response){                          $( '#'  + file.id).find( '.data' ).html( '' );                          $( "#upload_org_code_name" ).val(data);                          $( "#upload_org_code_img" ).attr( "src" , "${pageContext.request.contextPath}/getImg?file=" +data);                            $( "#upload_org_code_img" ).show();                      },                      //加上此句会重写onSelectError方法【需要重写的事件】                      'overrideEvents' : [ 'onSelectError' ,  'onDialogClose' ],                      //返回一个错误，选择文件的时候触发                      '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>

　　

1 2 3 4 5 6 7 8 9 10 11 12 13

< tr >              < td  align="right">< font  style="color: red;">*</ font >组织代码机构：</ td >              < td >                  < table >                      < tr >                          < td  width="45%">< input  type="file" name="upload_org_code" id="upload_org_code"/></ td >                          < td >< img  style="display: none" id="upload_org_code_img" src="" width="150" height="150"></ td >                      </ tr >                  </ table >                  < input  type="hidden" name="upload_org_code_name" id="upload_org_code_name" />                  < hr >              </ td >          </ tr >

　　

后端servlet：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115

package  com.mybank.enterprise.framework.servlet;   import  java.io.File; import  java.io.FileOutputStream; import  java.io.IOException; import  java.io.InputStream; import  java.io.OutputStream; import  java.io.PrintWriter; import  java.util.Iterator; import  java.util.List;   import  javax.servlet.ServletException; import  javax.servlet.http.HttpServlet; import  javax.servlet.http.HttpServletRequest; import  javax.servlet.http.HttpServletResponse;   import  org.apache.commons.fileupload.FileItem; import  org.apache.commons.fileupload.FileUploadException; import  org.apache.commons.fileupload.disk.DiskFileItemFactory; import  org.apache.commons.fileupload.servlet.ServletFileUpload;   import  com.mybank.enterprise.util.Constant; import  com.mybank.enterprise.util.StringUtil;   public  class  UploadIMGSerlet  extends  HttpServlet {          private  static  final  long  serialVersionUID = 1L;        // 上传文件的保存路径      private  String configPath = Constant.RB.getString( "img_path" );      // 临时文件路径      private  String dirTemp =  "resource/temp/" ;        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;            // 临时文件目录          String tempPath =  this .getServletContext().getRealPath( "/" ) + dirTemp;            // 创建文件夹          File dirFile =  new  File(savePath);          if  (!dirFile.exists()) {              dirFile.mkdirs();          }            // 创建临时文件夹          File dirTempFile =  new  File(tempPath);          if  (!dirTempFile.exists()) {              dirTempFile.mkdirs();          }            DiskFileItemFactory factory =  new  DiskFileItemFactory();          factory.setSizeThreshold( 20  *  1024  *  1024 );  // 设定使用内存超过5M时，将产生临时文件并存储于临时目录中。          factory.setRepository( new  File(tempPath));   // 设定存储临时文件的目录。            ServletFileUpload upload =  new  ServletFileUpload(factory);          upload.setHeaderEncoding( "UTF-8" );            try  {              List<?> items = upload.parseRequest(request);              Iterator<?> itr = items.iterator();                while  (itr.hasNext()) {                  FileItem item   = (FileItem) itr.next();                  String fileName = item.getName();                  if (fileName!= null ){                      String endstr = fileName.substring(fileName.indexOf( "." ),fileName.length());                      fileName      = StringUtil.createSerial20().concat(endstr);                      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();      }   }

　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

package  com.mybank.enterprise.framework.servlet;   import  java.io.File; import  java.io.FileInputStream; import  java.io.IOException; import  java.io.OutputStream;   import  javax.servlet.ServletException; import  javax.servlet.http.HttpServlet; import  javax.servlet.http.HttpServletRequest; import  javax.servlet.http.HttpServletResponse;   import  com.mybank.enterprise.util.Constant;   public  class  GetIMGServlet  extends  HttpServlet {            private  static  final  long  serialVersionUID = 2761789171087122738L;        public  void  doGet(HttpServletRequest req, HttpServletResponse resp)  throws  ServletException, IOException {            this .doPost(req, resp);      }        @Override      protected  void  doPost(HttpServletRequest req, HttpServletResponse resp)  throws  ServletException, IOException {            String file = req.getParameter( "file" );                    File pic =  new  File(Constant.RB.getString( "img_path" )+file);            FileInputStream fis =  new  FileInputStream(pic);          OutputStream os = resp.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();          }                }   }