zoukankan      html  css  js  c++  java
  • JEECG 上传插件升级-Online

    前言:

        现有的uploadify上传是基于swf的,随着H5的普及,flash即将退出历史舞台,JEECG本着与时俱进的原则,将全面升级JEECG系统中的上传功能,采用新式上传插件plupload,此插件上传支持多种模式html5,flash,silverlight,html4,可通过配置实现优先模式,对于新版主流浏览器均可采用H5,对于不支持H5的低版本IE浏览器可走flash模式。以下讲解JEECG Online的升级。

    升级步骤(细节描述可忽略)

    1.下载升级文件

         链接:https://pan.baidu.com/s/1SJXzPeN7qE4O6KB0O5qi2w 密码:z5eh

    2.【新增文件】

        增加JS/css,将plupload文件夹直接拷贝到src/main/webapp/plug-in/下

    3.【修改文件】

        拷贝Map.js至src/main/webapp/plug-in/tools/下,覆盖更新。

    4.【修改文件】

        拷贝FormHtmlUtil.java至src/main/java/org/jeecgframework/web/cgform/common/下,覆盖更新。

    (细节描述:在FormHtmlUtil类中新增一个方法getFilePluploadFormHtml 详细见升级文件,并找到getFormHTML方法,修改文件类型加载的页面代码的方法为getFilePluploadFormHtml,如下)

    ······
    }else if(cgFormFieldEntity.getShowType().equals("file")){
    	html=getFilePluploadFormHtml(cgFormFieldEntity);//获取实例化plupload组件的页面代码
    }
    ······
    

      

    5.【修改文件】

        拷贝CgFormBuildController.java至src/main/java/org/jeecgframework/web/cgform/controller/build/下,覆盖更新。

    (细节描述:在CgFormBuildController类中找到getHtmlHead方法,注掉老版JS,替换成新版,修改如下)

    //sb.append("<script type="text/javascript" src=""+basePath+"/plug-in/uploadify/jquery.uploadify-3.1.js"></script>");
    sb.append("<script type="text/javascript" src=""+basePath+"/plug-in/plupload/plupload.full.min.js"></script>");
    

    6.拷贝CgformFtlController.java至src/main/java/org/jeecgframework/web/cgform/controller/cgformftl/下,覆盖更新。

    (细节描述:在CgformFtlController类中找到addorupdate方法,注掉老版JS,替换成新版,修改如下)

    //sb.append("<script type="text/javascript" src="${basePath}/plug-in/uploadify/jquery.uploadify-3.1.js"></script>");
    sb.append("<script type="text/javascript" src="${basePath}/plug-in/plupload/plupload.full.min.js"></script>");
    

      

    7.拷贝文件夹moblieCommon001、moblieCommon002、ui至src/main/resources/online/template/下,覆盖更新。

    细节描述:这个步骤修改的有

        a.  新增宏文件src/main/resources/online/template/ui/uploadPltag.ftl,详细见升级文件。

        b.  修改tag宏文件src/main/resources/online/template/ui/tag.ftl:

    <#include "/online/template/ui/treetag.ftl"/>
    <#include "/online/template/ui/uploadPltag.ftl"/>
    

      

        c.  模板文件中的JS替换,即在src/main/resources/online/template下搜索 “jquery.uploadify-3.1.js” 若页面有,需要将此JS路径替换成plug-in/plupload/plupload.full.min.js,并且额外增加一个JS引入:

    <script type="text/javascript" src="plug-in/tools/Map.js"></script>

        例如:搜索到文件src/main/resources/online/template/ui/basetag.ftl内有“jquery.uploadify-3.1.js”,代码如下:

    <#if hasFile==true>
      <link rel="stylesheet" href="${webRootf!''}plug-in/uploadify/css/uploadify.css" type="text/css"></link>
      <script type="text/javascript" src="${webRootf!''}plug-in/uploadify/jquery.uploadify-3.1.js"></script>
    </#if>
    

      

        现需要将其改成:

    <#if hasFile==true>
      <link rel="stylesheet" href="${webRootf!''}plug-in/uploadify/css/uploadify.css" type="text/css"></link>
      <script type="text/javascript" src="${webRootf!''}plug-in/plupload/plupload.full.min.js"></script>
      <script type="text/javascript" src="${webRootf!''}plug-in/tools/Map.js"></script>
    </#if>
    

      

    8.执行升级SQL

    update cgform_ftl SET FTL_CONTENT = replace(FTL_CONTENT, 'plug-in/uploadify/jquery.uploadify-3.1.js', 'plug-in/plupload/plupload.full.min.js');
    

      

  • 相关阅读:
    判断图片是否存在,不存在则显示默认图片
    移动端开发时代理手机http访问查看效果(iphone)
    VS Code搭建TypeScript开发环境
    map,foreach和for的使用
    记一些常用的git命令
    js中创建对象的5种方法
    vuex简单使用
    记一下Slot的使用
    ES6中的箭头函数和普通函数有什么区别?
    计算属性、方法、侦听属性的区别
  • 原文地址:https://www.cnblogs.com/jeecg158/p/9605576.html
Copyright © 2011-2022 走看看