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

原创 2016年08月28日 14:10:26


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

版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery上传文件控件Uploadify使用

Uploadify是JQuery的一个上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件等。 首先应下载jQuery和uploadify插件 jQuery下载地址:h...
  • aqsunkai
  • aqsunkai
  • 2016年06月28日 22:42
  • 5175

jQuery 异步上传插件 Uploadify 使用 (Java平台)

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。而且是Ajax的,省去了自己写上传功能的麻烦。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在J2E...
  • leixiaohua1020
  • leixiaohua1020
  • 2013年10月12日 15:00
  • 20125

java版-JQuery上传插件Uploadify使用实例

运行效果: 包结构图:   后台JAVA逻辑: Java代码   package com.bijian.study;      import ...
  • huangshengzhi
  • huangshengzhi
  • 2014年04月24日 13:56
  • 2068

jquery使用uploadify插件实现多文件的上传(java版)

最近要用Servlet/JSP做一个上传功能demo供新人学习。于是就有了这篇博客。我采用的是Apache提供的commons-fileupload jar包,以及jquery uploadify插件...
  • wesley5201314
  • wesley5201314
  • 2015年08月05日 11:02
  • 1511

Jquery上传插件uploadify的使用(JSP)版

今天,突然想研究下那个uploadify插件,在网上搜索好多资料,发现千奇百怪,可能是版本问题,关于服务端处理脚本我发现了两种说法,一种是通过‘script’来设置的,另一种是用‘uploadify’...
  • xp_15907659204
  • xp_15907659204
  • 2013年11月26日 10:10
  • 1879

jQuery上传插件Uploadify使用Demo、本地上传(ssm框架下)

效果: 1. jar包导入: commons-fileupload commons-fileupload 1.3.1 2.  在spring的配置文件中加上...
  • u011314442
  • u011314442
  • 2017年03月07日 14:42
  • 2669

JQuery上传插件Uploadify的简单使用

在开发 web程序的时候,上传附件或是照片这是常有的事件,以前一直在使用swfupload,后来发现了Jquery的Uploadify感觉不错,就试了一下,这里做一个记录。以备使用。        ...
  • chenguang79
  • chenguang79
  • 2016年02月29日 14:46
  • 7143

jQuery上传插件uploadify判断文件是否存在

最近因为工作需要,接触到了jQuery 的uploadify文件上传插件,上一篇转载的文章中有写它基本的用法,这里要说的问题是为了验证上传文件是否已经存在于服务器,就需要checkExisting这一...
  • u012885111
  • u012885111
  • 2015年08月22日 17:50
  • 2240

JQuery的Uploadify实现多文件上传

JQuery的Uploadify实现多文件上传,支持限制文件大小等,最基本的jsp+servlet方式。...
  • liangbinny
  • liangbinny
  • 2015年01月02日 14:18
  • 7599

uploadify+java实现多文件上传和预览

1、下载uploadify插件 2、index.html /js/uploadify-v3.1/jquery.uploadify-3.1.js"> /js/uploadify-v3.1/u...
  • zz_cl
  • zz_cl
  • 2016年10月06日 11:02
  • 3503
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery上传插件Uploadify无刷新上传文件
举报原因:
原因补充:

(最多只允许输入30个字)