Wordpress联系人表格7：如何自定义文件输入上传？

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

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

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

<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>

$（“.custom file input”）.on（“更改”，函数（）{
var fileName=$（this.val（）.split（“\\”）.pop（）；
$（this）.sides（“.custom file label”）.addClass（“selected”）.html（文件名）；
});

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

它给出了类似于：

<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生成代码的方式，它不起作用

我不知道。。你有什么想法吗？ 提前感谢您的帮助：）

[file file-265 id:fileuploadfield类：fileuploadfield限制：120000文件类型：.jpg.png 1/]
[文本uploadtextfield id:uploadtextfield类：uploadtextfield]

由于CF7将字段包装在内部，因此首先需要查找父容器（假定为.custom文件），然后查找.custom文件标签

$（.custom file input”）.on（“更改”，函数（）{
var filename=$（this.val（）.split（“\\”）.pop（）；
$（this）.parents（“.custom file”）.find（“.custom file label”）.addClass（“selected”）.html（文件名）；
});

---

这是一个比较晚的回答，但我今天遇到了同样的问题，这个问题帮助我找到了解决方案。

对不起，我不理解你的回答。这个回答不符合指南的最低要求。答案可能有用。

[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">