Question

我想自定义从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，我们使用短代码te create输入。

它给出了类似的内容：

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

我不知道。你有个主意吗？预先感谢您的帮助：）

Answer 1

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

Answer 2

由于 CF7 将字段包装在内，您首先需要查找父容器（假设为 .custom-file），然后查找 .custom-file-label。

$(".custom-file-input").on("change", function() {
    var filename = $(this).val().split("\\").pop();
    $(this).parents(".custom-file").find(".custom-file-label").addClass("selected").html(filename);
});

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

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

2 个答案: