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

Question

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.但是，我确实想在用户上传文件时显示文件名。

Using wordpress contact form 7, i already tried putting a JS function on the label, but that doesnt work.使用 wordpress contact form 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>

The filename should be displayed next to the label.文件名应显示在标签旁边。

Answer 1

You can use Event.target along with triggering the change event.您可以使用Event.target以及触发更改事件。

Please Note: You also have syntax error in your code (missing the { ....... } part of the function displayfilename ).请注意：您的代码中也有语法错误（缺少函数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>

OR: You can also use this object:或者：您也可以使用此对象：

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

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

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>

Answer 4

Here's a custom <button> and a custom filename <span> :这是一个自定义<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 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 个解决方案

解决方案1
2 2019-04-17 11:38:56

解决方案2
2 2021-02-15 11:01:42

解决方案3
1 已采纳 2019-04-17 11:37:29

解决方案4
1 2019-04-17 11:44:49

解决方案5
0 2019-04-17 11:51:21

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

问题描述

5 个解决方案

解决方案1 2 2019-04-17 11:38:56

解决方案2 2 2021-02-15 11:01:42

解决方案3 1 已采纳 2019-04-17 11:37:29

解决方案4 1 2019-04-17 11:44:49

解决方案5 0 2019-04-17 11:51:21

解决方案1
2 2019-04-17 11:38:56

解决方案2
2 2021-02-15 11:01:42

解决方案3
1 已采纳 2019-04-17 11:37:29

解决方案4
1 2019-04-17 11:44:49

解决方案5
0 2019-04-17 11:51:21