Jquery上传插件Uploadify无刷新上传文件

简介: Uploadify v3.2.1  上传图片并预览前端JSP:<script type="text/javascript">                           $(function() {                $("#upload_org_code").uploadify({                    'height'    


Uploadify v3.2.1  上传图片并预览


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


后端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只要返回流对象即可,常用的如验证码


参考文章:

http://www.cnblogs.com/yangy608/p/3915337.html


本文出自 “点滴积累” 博客,请务必保留此出处http://tianxingzhe.blog.51cto.com/3390077/1752946

目录
相关文章
|
2天前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
24 7
|
2天前
|
JavaScript 前端开发 API
漂亮的jQuery对话框插件Dialogify
这是一款jQuery对话框插件。该对话框插件使用dialog元素和 HTMLDialogElement API来制作对话框, 可以生成漂亮的对话框效果。
22 7
|
2天前
|
JavaScript
jQuery响应式垂直侧边栏插件rvnm
jQuery响应式垂直侧边栏插件rvnm
|
10天前
|
JavaScript
jQuery简单实用的圆形进度条插件
CirclesProgressbar是一款简单实用的jQuery圆形进度条插件。该插件可以自定义圆形进度条的大小,填充颜色,边框颜色和是否带动画效果等。该圆形进度条插件在使用上非常简单。
|
15天前
|
JavaScript
可自由配置的jQuery消息提示框插件toast
jquery.toast.js是一款可自由配置的jQuery消息提示框插件。该消息提示框可以自定义背景和前景色,提示框的位置,提示框的显示时间,提示框的动画效果等。
19 2
|
17天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
28 5
|
18天前
|
JavaScript 前端开发 容器
jQuery二维码生成插件
jquery.qrcode.js二维码插件允许你在网页中容易的插入二维码,可以生成表格形式的二维码,或基于canvas的图片二维码
|
17天前
|
移动开发 JavaScript 前端开发
基于canvas的jQuery图片剪裁插件
imageResizer是一款基于canvas的jQuery图片剪裁插件。它使用简单,可以基于HTML5 canvas实现图片的平移和剪裁。
|
1天前
|
JavaScript
jQuery新闻类轮播图插件sliderBox
sliderBox.js是一款jQuery新闻类轮播图插件。该jQuery新闻类轮播图插件可以创建兼容ie8、带缩略图导航、以及多种过渡效果的轮播图。
8 0
|
3天前
|
JavaScript 前端开发
灵活的jQuery垂直手风琴插件
这是一款使用jQuery和css3 transitions制作垂直手风琴插件。
19 0