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

编辑
  • 文档创建者:w帆
  • 浏览次数:2234次
  • 编辑次数:4次
  • 最近更新:Kevin-s 于 2019-06-22
  • 1. 描述

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


    2. 操作步骤

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

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

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

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

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

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

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

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

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

    3. 扩展功能

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

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

    id 为:fr-btn-

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

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

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

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


    4. 效果预览

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





    5. 已完成模板

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

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

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

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

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