开发者社区> 神巧合> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery 插件开发
因为公司用到了自己定义的列表展示,于是看了看实现的方法,发现,是在jquery上,进行了插件开发。 下面的代码是在使用插件,渲染集合列表。 $('#table_report').dataTable({ "bFilter" : false, // 开关,是否启用客户端过滤器 "bProcessing" : true, // 当datatable获取数据时候是否显示正在处理提示信息。
1484 0
jQuery插件开发的五种形态[转]
这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细。 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课。开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多。这里我把我
2703 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1020 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
942 0
+关注
346
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载