jqueryuploadify的使用

由于项目是存储图片的，要使用到上传的功能，而且个人想做好点。所以在网上搜了下资料，觉得这个jquery 的插件还不错。

成都创新互联自2013年创立以来，先为阿巴嘎等服务建站，阿巴嘎等地企业，进行企业商务咨询服务。为阿巴嘎企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

首先放个工程的分布图

jquery uploadify的使用

项目是拿以前搭建好的SSH的框架，不过里面只用到struts2。

用到的jar的话大家自己去下载吧。jquery uploadify的版本是2.1.4的。

index.jsp下面的代码是

 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
    String path = request.getContextPath(); 
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" 
            + request.getServerPort() + path + "/"; 
%> 
 
     
        "> 
        首页 
     
 
 
 
 
        
        $(document).ready(function() { 
            $("#uploadify").uploadify({ 
                'uploader'       : 'uploadify/uploadify.swf',   //flash，上传时的显示 
                'script'         : 'show.action',               //提交处理的地址，默认是php的 
                'fileDataName'   : 'file',                      //在处理的地址接收的名字 
                'cancelImg'      : 'uploadify/cancel.png',      //上传时的取消按钮 
                'folder'         : '/p_w_picpath',                    //上传放到服务器的哪个路径，（一开始的时候可以的，但是后来不知道修改了什么就在后台也要加上这个文件夹了，那样这个属性就没意思了） 
                'queueID'        : 'upLoadDiv',                 //显示附件在哪个DIV 
                'fileDesc'       : '图片文件',                  //选择文件的最后一个框框显示的提示 
                'fileExt'        : '*.jpg;*.png;*.bmp',         //只允许什么类型的文件上传 
                'sizeLimit'      : 1024*1024*1,                 //上传文件的大小byte单位的如果是在struts2上面用的话，要在struts.xml里面加上 
                'queueSizeLimit' : 2,                           //最多可以选择多少个文件 
                'auto'           : false,                       //自动上传 
                'multi'          : true,                        //多文件上传 
                'simUploadLimit' : 2,                           //一次上传多少个文件 
                'buttonText'     : 'BROWSE',                    //上传的button文字 
               // 'scriptData'   :{'name':'xxx','id':'sss'},    //参数json类型 
                //'method'       :'get',                        //提交方法类型，默认post，有参数就要get             
                 'onError'       :function(event,queueID,fileObj,errorObj){ 
                            //一般这个的话会在上传上来文件的那个div上显示，但出来的错误是英文的 
                            alert("文件:"+fileObj.name+"上传失败!失败的原因是:"+errorObj.type); 
                }, 
                'onAllComplete'  :function(event,data){//ajax返回，所有文件上传之后的回调 
                    alert("一共上传："+data.filesUploaded+"个文件,错误数："+data.errors+".上传速度："+data.speed+"kb/s"); 
                } 
            });   
        });

上传

取消所有上传

struts.xml里面的代码挺少的

struts2默认文件上传的大小是2M，大于2M的上传不了。所以我们要设置一下。

Action类里面的代码：

导包的话大家自己导吧。

public class Show { 
 
    private File file; // 前台传过来的文件 
    private String fileFileName; // 文件名 
    private String fileContentType; // 文件类型 
 
    public void uploadImg() throws IOException  { 
        HttpServletResponse response = ServletActionContext.getResponse(); 
        HttpServletRequest request = ServletActionContext.getRequest(); 
        // 写到服务器上 
        response.setCharacterEncoding("utf-8"); 
        try { 
        String path = request.getRealPath("/p_w_picpath"); 
        FileInputStream in = new FileInputStream(file); 
        FileOutputStream out = new FileOutputStream(new File(path + "/" + fileFileName)); 
        byte[] b = new byte[1024]; 
        while ((in.read(b) > -1)) { 
            out.write(b); 
        } 
        in.close(); 
        out.close(); 
        response.getWriter().write("上传成功！"); 
        }catch (Exception e) { 
            e.printStackTrace(); 
            response.getWriter().write("上传失败!请联系管理员或者重新上传！"); 
        } 
    } 
 
    public File getFile() { 
        return file; 
    } 
 
    public void setFile(File file) { 
        this.file = file; 
    } 
 
    public String getFileFileName() { 
        return fileFileName; 
    } 
 
    public void setFileFileName(String fileFileName) { 
        this.fileFileName = fileFileName; 
    } 
 
    public String getFileContentType() { 
        return fileContentType; 
    } 
 
    public void setFileContentType(String fileContentType) { 
        this.fileContentType = fileContentType; 
    } 
}

最后发个成品的图片

jquery uploadify的使用

有什么错误的地方请大家指点一下，共同成长！

新闻名称：jqueryuploadify的使用
文章路径：http://wjwzjz.com/article/gcisgc.html

新网创想网站建设，新征程启航

jqueryuploadify的使用

其他资讯