Uploadify v3.2.1 上传图片并预览

最新推荐文章于 2019-01-17 11:22:00 发布

转载最新推荐文章于 2019-01-17 11:22:00 发布 · 674 阅读

jQuery 专栏收录该内容

171 篇文章

订阅专栏

本文介绍了一个使用JSP实现的图片上传功能，包括前端页面的上传控件配置及后端处理逻辑。前端通过Uploadify插件实现文件选择与上传，后端采用Servlet接收文件并保存到指定路径。

前端JSP：

<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>

<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：

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

    }

}

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

        }

    }

}