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

Question

大家

重力形式插件使用标准文件输入元素。

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

之后，如何显示输入的文件名，如下所示？

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

我该怎么做？或者还有什么其他好的办法吗？

问候

Answer 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)
    })
  })
})

Answer 2

Gravityforms 中有一个选项允许上传多个文件，并将字段的样式更改为您想要的。你尝试过吗？