前言:
现有的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,如下)
1 2 3 4 5 | ······ } 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,替换成新版,修改如下)
1 2 | //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,替换成新版,修改如下)
1 2 | //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:
1 2 | <#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”,代码如下:
1 2 3 4 | <# 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 > |
现需要将其改成:
1 2 3 4 5 | <# 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
1 | update cgform_ftl SET FTL_CONTENT = replace(FTL_CONTENT, 'plug-in/uploadify/jquery.uploadify-3.1.js' , 'plug-in/plupload/plupload.full.min.js' ); |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」