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

【问题标题】：How to display file name with javascript after upload上传后如何用javascript显示文件名
【发布时间】：2019-04-17 11:33:32
【问题描述】：

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

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

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

【问题讨论】：

您在 onclick 处理程序中分配了一个 onchange 处理程序。这将继续为元素分配越来越多的onchange 处理程序。

标签： javascript forms file-upload

【解决方案1】：

您可以使用Event.target 来触发change 事件。

请注意：您的代码中还有语法错误（缺少函数displayfilename 的{......} 部分）。

$('#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>

或者：你也可以使用这个对象：

$('#fileInput').change(function(){
  var filename = $(this)[0].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>

【讨论】：

好的，当我应用这个时，我遇到了另一个问题。当我包含 jquery 库时，我收到通知类型错误：e.indexOf is not a function with reference to a theme file js/general.js?ver=1.0.41

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

快到了。但是，我不想要警报，只是将文件名输出为标签后的文本....
抱歉刚刚解决了。正确的解决方案是将“alert”更改为 document.getElementById("fileuploadspan").innerHTML。谢谢！

【解决方案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>

【讨论】：

【解决方案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);
        }
    }

【讨论】：