时间戳

首页 > 解决方案 > Wordpress Contact Form 7：如何自定义文件输入上传？

wordpress - Wordpress Contact Form 7：如何自定义文件输入上传？

问题描述

我想在 WP 中自定义从 CF7 上传的输入文件。

自定义按钮的方法有很多，但我需要在上传文件后显示文件名。

我找到了一种使用此代码的方法：

<input type="file" class="custom-file-input">
<label class="custom-file-label" for="custom-file-input">Your file</label>

这个脚本：

<script>
$(".custom-file-input").on("change", function() {
 var fileName = $(this).val().split("\\").pop();
 $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

它可以工作，但对于 CF7，我们使用短代码创建输入。

它给出了类似的东西：

<span class="wpcf7-form-control-wrap">
<input type="file" name="your-file" size="40" class="wpcf7-form-control wpcf7-file custom-file-input" id="your-file" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx" aria-invalid="false">
</span>
<label class="custom-file-label" for="your-file">Your file</label></div>

它不再起作用了。JS 似乎可以使用 CF7 代码。

也许它不起作用是因为 CF7 的代码生成方式？

我不知道..你有什么想法吗？提前感谢您的帮助:)

标签： wordpresscontact-form-7

解决方案

[file file-265 id:fileuploadfield class:fileuploadfield limit:120000 filetypes:.jpg .png 1/]
[text uploadtextfield id:uploadtextfield class:uploadtextfield]
<input type="button" id="uploadfile" value="select">

推荐阅读