zoukankan      html  css  js  c++  java
  • 文件上传插件Uploadify在Struts2中的应用,完整详细实例

    —》最近由于项目需要使用到一个上传插件,在网上发现uploadify挺不错,所以决定使用它,但是官网文档和例子是php的,而项目是SSI框架的,所以自己对uploadify在struts2中的使用进行了一番研究,最终实现了。发现网上关于这方面的资料很少,而且有的一两篇例子还不大全,网友提问质疑很多,所以,下面我特将我的代码公布: 

    --------------------------------------------------------------------- 
    步骤一: 到官网上下载uploadify的JS文件。注意,还得需要Jquery文件。还没有的朋友,自己到www.jquery.com上面找来下载吧。 

    Uploadify在线演示:在线Demo 

    Uploadify配置参数及接口文档:http://www.uploadify.com/documentation 

    Uploadify插件下载地址:http://www.uploadify.com/download 

    -------------------------------------------------------------------- 
    步骤二:下载好uploadify压缩包文件后,解压文件包。在文件夹中找到以下五个文件,并添加到项目的对应路径中: 
        jquery.uploadify.v2.1.0.js 
       swfobject.js 
       uploadify.swf 
       uploadify.css 
       cancel.png 


    --------------------------------------------------------------------- 
    步骤三:书写JSP文件,以下截取核心部分。也就是和upload有关的代码。 

    <% 
    String path = request.getContextPath(); 
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
    %> 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 

    <script type="text/javascript" src="<%=path %>/js/tech/jquery/jquery.js"></script> 
    <script type="text/javascript" src="<%=path %>/js/tech/jquery/swfobject.js"></script> 
    <script type="text/javascript" src="<%=path %>/js/tech/jquery/jquery.uploadify.v2.1.0.js"></script> 

    <link href="<%=path %>/css/tech/jquery/uploadify.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript"> 
            $(document).ready(function() { 
                $("#fileupload").uploadify({ 
                    /*注意前面需要书写path的代码*/ 
                    'uploader'       : '<%=path%>/medium/jquery/uploadify.swf', 
                    'script'         : '<%=path%>/commonutil/uploadUtil.action', 
                    'cancelImg'      : '<%=path%>/pic/tech/jquery/uploadify/cancel.png', 
                    'queueID'        : 'fileQueue', //和存放队列的DIV的id一致 
                    'fileDataName'   : 'fileupload', //和以下input的name属性一致 
                    'auto'           : false, //是否自动开始 
                    'multi'          : true, //是否支持多文件上传 
                    'buttonText'     : 'Browse', //按钮上的文字 
                    'simUploadLimit' : 3, //一次同步上传的文件数目 
                    'sizeLimit'      : 19871202, //设置单个文件大小限制 
                    'queueSizeLimit' : 2, //队列中同时存在的文件个数限制 
                    'fileDesc'       : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性,那么这个属性是必须的
                    'fileExt'        : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式   
                onComplete: function (event, queueID, fileObj, response, data) { 
    $('<li></li>').appendTo('.files').text(response); 
    }, 
    onError: function(event, queueID, fileObj) { 
                 alert("文件:" + fileObj.name + "上传失败"); 
           }, 
           onCancel: function(event, queueID, fileObj){ 
           alert("取消了" + fileObj.name); 
           } 
                }); 

            }); 
            </script> 

    <script type="text/javascript"> 
                      //必须的 
    function uploadifyUpload(){ 
       $('#fileupload').uploadifyUpload(); 

    </script> 

    ......(该部分为其他无关的JSP代码,省略) 

    <tr> 
    <td>上传图片:</td> 
    <td> 
    <input type="file" name="fileupload" id="fileupload" /> 
    <div id="fileQueue"></div> 
    <p> 
    <a href="javascript:;" onClick="javascript:uploadifyUpload()">开始上传</a>&nbsp; 
    <a href="javascript:jQuery('#fileupload').uploadifyClearQueue()">取消所有上传</a> 
    </p> 
    <ol class="files"></ol> 
    </td> 
    </tr> 



    -------------------------------------------------------------------- 
    步骤四:书写处理上传的ACTION类,下面给出实现代码: 

    public class UploadUtilAction extends ActionSupport{ 

        private File fileupload; //和JSP中input标记name同名 
        
        //Struts2拦截器获得的文件名,命名规则,File的名字+FileName 
        //如此处为 'fileupload' + 'FileName' = 'fileuploadFileName' 
        private String fileuploadFileName; //上传来的文件的名字 
        

    public File getFileupload() { 
    return fileupload; 


    public void setFileupload(File fileupload) { 
    this.fileupload = fileupload; 


    public String getFileuploadFileName() { 
    return fileuploadFileName; 


    public void setFileuploadFileName(String fileuploadFileName) { 
    this.fileuploadFileName = fileuploadFileName; 


    public String uploadFile() throws Exception { 

    String extName = ""; //保存文件拓展名 
    String newFileName = ""; //保存新的文件名 
    String nowTimeStr = ""; //保存当前时间 
    SimpleDateFormat sDateFormat; 
            Random r = new Random(); 
            
    String savePath = ServletActionContext.getServletContext().getRealPath(""); //获取项目根路径 
    savePath = savePath + "/pic/secondhand/"; /*拼串组成要上传保存文件的路径,即:D:/Program Files/apache-tomcat-6.0.20/webapps/(项目名)/pic/secondhand 这样的路径*/ 
            
            HttpServletResponse response  = ServletActionContext.getResponse(); 
            response.setCharacterEncoding("utf-8"); //务必,防止返回文件名是乱码 
            
            //生成随机文件名:当前年月日时分秒+五位随机数(为了在实际项目中防止文件同名而进行的处理)   
            int rannum = (int) (r.nextDouble() * (99999 - 10000 + 1)) + 10000; //获取随机数 
            sDateFormat = new SimpleDateFormat("yyyyMMddHHmmss"); //时间格式化的格式 
            nowTimeStr = sDateFormat.format(new Date()); //当前时间 
            
            //获取拓展名 
            if (fileuploadFileName.lastIndexOf(".") >= 0){   
                extName = fileuploadFileName.substring(fileuploadFileName.lastIndexOf("."));   
            } 
            
            newFileName = nowTimeStr + rannum + extName; //文件重命名后的名字 
    fileupload.renameTo(new File(savePath + newFileName)); //保存文件 

    response.getWriter().print(fileuploadFileName + " 上传成功");//向页面端返回结果信息 

            return null; //这里不需要页面转向,所以返回空就可以了 
        } 


    ---------------------------------------------------------------------- 
    步骤五:配置struts.xml文件 

    <?xml version="1.0" encoding="UTF-8" ?> 
    <!DOCTYPE struts PUBLIC 
        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 
        "http://struts.apache.org/dtds/struts-2.0.dtd"> 

    <struts> 
      
        <package name="commonutil" extends="struts-default" namespace="/commonutil"> 
        
        <!-- 用于处理上传文件的公用ACTION,我因为项目使用了spring,所以class这样配置,否则,需要正常进行配置写完整类路径,此外,这里不需要配result节点--> 
        <action name="uploadUtil" class="uploadUtilAction" method="uploadFile"> 
            </action> 
            
        </package> 

    </struts> 

    ---------------------------------------------------------------------- 
          以上就是全部代码的书写。经测试,是没问题的。

          最后需要补充的一点是:当设置了'sizeLimit'属性来设置单个文件大小限制时候,在选择文件时候当超过大小时候是不提示的,还是会添加到队列中,但是,当点击 开始上传 的时候,才会进行对应提示。我觉得这也是这个插件一个不完美的地方,有兴趣的朋友可以自己写下方法去实现这一环节,让在选文件的时候就进行提示,超过大小就不允许添加进队列中吧。

          好了,其他相关的说明,我在代码中关键的地方都已经注释很清楚了,大家仔细阅读注释,就可以懂怎么使用。

  • 相关阅读:
    .net core 学习小结之 配置介绍(config)以及热更新
    .net core 学习小结之环境配置篇
    powershell下载网站图片
    Powershell 脚本输出前十条消耗内存的进程到excel
    Linux 自学shell
    使用bat脚本进行开机启动批处理
    Git 创建分支并合并主分支
    Git 的使用及其一些基本用法
    点击按钮复制文本到剪切板
    关于一些基本排序的实现
  • 原文地址:https://www.cnblogs.com/chengJAVA/p/3703646.html
Copyright © 2011-2022 走看看