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

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

2.1 操作步骤

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

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

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

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

按钮控件 H3 里同时给按钮控件添加点击事件，如下图：

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

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

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

提示：文件名称考虑会重名 ，使用 UUID 会更人性化，避免文件被替换

2.2 扩展功能

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

首先用谷歌浏览器查找你按钮的 id

id 为：fr-btn-

2. 点击模板>模板 Web 属性>填报页面设置，添加加载结束事件

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

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

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

2.3 效果预览

保存模板，点击填报预览，PC 端效果如下所示：

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

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

点击下载模板：61-JS自定义按钮选取文件.cpt