在 Wordpress Gravity Form 插件中，如何自定义文件上传 UI？

【问题标题】：at Wordpress Gravity Form plugin, how to customize the File Upload UI?在 Wordpress Gravity Form 插件中，如何自定义文件上传 UI？
【发布时间】：2021-10-21 15:34:52
【问题描述】：

每个人。

重力表单插件使用标准文件输入元素。

我可以通过将自定义 css 添加到 File 标签标签并使用 gform_field_content 过滤器使其看起来像自定义 UI。

之后，我怎样才能将估算的文件名显示为如下状态？

如您所见，估算的文件名 Group 386.svg 正在显示。

我该怎么做？还是有什么好的方法？

问候

【问题讨论】：

标签： wordpress file-upload gravity-forms-plugin

【解决方案1】：

我自己找到了解决方案。

我按照本指南（W3 自定义文件上传）将自定义样式添加到标签 )https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp

之后，我添加了 js 事件来显示选择的文件名，如下所示。

// contat form, join us form
// customize file upload
jQuery(function () {
  jQuery(document).on('gform_post_render', function () {
    jQuery('.contact-form__form input[type=file], .join-us__form input[type=file]').on('change', function () {
      const fileName = jQuery(this).val().split('\\').pop()
      jQuery('label', jQuery(this).parent().parent()).html(fileName)
    })
  })
})

【讨论】：