上传后如何使用javascript显示文件名 [英] How to display file name with javascript after upload

问题描述

我想使用其他按钮将文件上传到表单.因此，我隐藏了标准上传文件按钮.但是，我确实想在用户上传文件时显示文件名.

I want to use a different button to upload files to a form. Therefore, i hide the standard upload file button. However, i do want to display the filename when a user uploads a file.

使用wordpress联系表7，我已经尝试在标签上放置JS函数，但这不起作用.

Using wordpress contact form 7, i already tried putting a JS function on the label, but that doesnt work.

<label for="fileInput" class="custom-file-upload" onclick="displayfilename()">Choose file</label>
<input id="fileInput" name="fileInput" type="file" />
<span class="fileuploadspan">No file selected</span>

<script>
function displayfilename() 
$('#fileInput').change(function(){
var filename = $(this).val().split('\\').pop();
});
</script>

文件名应显示在标签旁边.

The filename should be displayed next to the label.

推荐答案

您可以通过以下方式访问文件名:

You can access the file name in this way:

<label for="fileInput" class="custom-file-upload" onclick="displayfilename()">Choose file</label>
<input id="fileInput" name="fileInput" type="file" />
<span class="fileuploadspan">No file selected</span>

<script>
function displayfilename() 
$('#fileInput').change(function(e) {
  var fileName = e.target.files[0].name;
  alert('The file "' + fileName +  '" has been selected.');
});
</script>

这篇关于上传后如何使用javascript显示文件名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！