Question

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

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

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

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

Answer 1

您可以将Event.target与触发 change 事件一起使用。

请注意：您的代码中也存在语法错误（缺少函数{的{{1}} ....... }部分）。

displayfilename

$('#fileInput').change(function(e){
  var filename = e.target.files[0].name;
  console.log(filename);
});
function displayfilename() {
  $('#fileInput').trigger('change');
}

OR：您还可以使用 this 对象：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="fileInput" class="custom-file-upload" >Choose file</label>
<input id="fileInput" name="fileInput" type="file" />
<span class="fileuploadspan">No file selected</span>

$('#fileInput').change(function(){
  var filename = $(this)[0].files[0].name;
  console.log(filename);
});
function displayfilename() {
  $('#fileInput').trigger('change');
}

Answer 2

$('#fileInput').change(function(e){
  var filename = e.target.files[0].name;
  console.log(filename);
});
function displayfilename() {
  $('#fileInput').trigger('change');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="fileInput" class="custom-file-upload" >Choose file</label>
<input id="fileInput" name="fileInput" type="file" />
<span class="fileuploadspan">No file selected</span>

Answer 3

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

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

Answer 4

这是自定义<button>和自定义文件名<span>：

$('.choosefile').click(function () {
  $('#fileInput').click();
});
$('#fileInput').change(function(e) {
  var filename = this.files[0].name;
  $('.fileuploadspan').text(filename);
});

input[type=file] {
  display: none
}

.choosefile, .fileuploadspan {
  font-family: "Comic Sans MS"
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="fileInput" class="custom-file-upload">Choose file</label>
<button class="choosefile">Browse...</button>
<input id="fileInput" name="fileInput" type="file" />
<span class="fileuploadspan">No file selected</span>

Answer 5

    <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   <body>

    <label for="fileInput" class="custom-file-upload">Choose file
            <input id="fileInput" name="fileInput" type="file"  onchange="uploadPreview(this)"  style="display:none"/>
         </label><br>
         <span class="fileuploadspan">No file selected</span>
   </body>
   </html>

js

uploadPreview = function (fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /image.*/;
            if (!file.type.match(imageType)) {
                continue;
            }
            var reader = new FileReader();
            reader.onload = function (e) {

                var filename = file.name;
                filename = filename.replace('.jpg', '');
                filename = filename.replace('.jpeg', '');
                filename = filename.replace('.png', '');
                filename = filename.replace('.gif', '');
                filename = filename.replace('.bmp', '');
                $('.fileuploadspan').text(filename);

                return;
            };
            reader.readAsDataURL(file);
        }
    }

上传后如何使用javascript显示文件名

5 个答案: