forms - How to display file name with javascript after upload - Stack Overflow

admin管理员组

文章数量:1356815

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.

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

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.

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

• javascript
• forms
• file-upload

Share Improve this question Follow asked Apr 17, 2019 at 11:33 WebdeverWebdever 52566 silver badges2020 bronze badges 1

• You are assigning an onchange handler inside an onclick handler. This will keep assigning more and more onchange handlers to the element. – user5734311 Commented Apr 17, 2019 at 11:38

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You can use Event​.target along with triggering the change event.

Please Note: You also have syntax error in your code (missing the {.......} part of the function 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./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./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(e){
  var filename = e.target.files[0].name;
  console.log(filename);
});
function displayfilename() {
  $('#fileInput').trigger('change');
}

<script src="https://cdnjs.cloudflare./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>

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>

Here's a custom <button> and a custom filename <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./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>

    <!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);
        }
    }

本文标签： formsHow to display file name with javascript after uploadStack Overflow