Uploadify v3.2.1  上传图片并预览

前端JSP：

     
                                 $(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;                        }                    },                });         
     

后端servlet：

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();    } }

显示图片servlet

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();        }             } }

img标签的src可以指向servlet只要返回流对象即可，常用的如验证码

参考文章：