利用Js实现自定义按钮选取文件并上传到数据库

编辑
文档创建者:w帆 (95481 )     浏览次数:717次     编辑次数:3次     最近更新:ukae 于 2018-08-08     

目录:

1.描述编辑

使用文件控件上传文件,FR自带文件控件默认样式为222 ,那么如何采用按钮的样式来达到选取文件的功能并上传至数据库的效果了?


2.操作步骤编辑

1.添加一个数据库查询:SELECT * FROM 雇员;如图拖入数据列。

H3添加按钮控件;I3添加文件控件;如图设置文件控件不可见,并设置文件类型为:jpg,png,gif;
222

2.点击模板>web属性>填报预览,勾选直接显示控件
222

3.给H3的按钮控件添加爱按钮名称:上传文件,如下图:
222

按钮控件H3里同时给按钮控件添加点击事件,如下图:
222

return document.getElementsByName("file")[0].click();

提示:找到name=file第一个元素的点击事件,即模拟文件控件的单击事件  

4.点击模板>报表填报属性  对应各字段单元格;照片列双击值,选择公式,输入:=UUID()

222

222

提示:文件名称考虑会重名 ,使用uuid会更人性化,避免文件被替换

3.扩展功能编辑

1.如果想在页面加载完后自动触发文件选取功能,只需添加如下代码(适用与360兼容模式视图,IE,按钮点击样式时候所有主流浏览器)

首先用谷歌浏览器查找你按钮的id
222
id为:fr-btn-

2点击模板>web属性>填报页面设置,添加加载结束事件
222

document.getElementById("fr-btn-12").click();

提示:页面加载后即模拟按钮的点击事件

注意:页面加载触发功能只适用与360兼容模式视图,IE

4.效果预览编辑

点击填报预览,效果如图:
222


222

222

5.已完成模板编辑

模板效果在线查看请点击在线示例

已完成的模板,可参见%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\61-JS自定义按钮选取文件.cpt

点击下载模板


附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?只是浏览 [ 去社区提问 ]