Как отобразить имя файла с помощью JavaScript после загрузки - PullRequest
Новая
       17

Как отобразить имя файла с помощью JavaScript после загрузки

1 голос
/ 17 апреля 2019

Я хочу использовать другую кнопку для загрузки файлов в форму. Поэтому я скрываю стандартную кнопку загрузки файла. Однако я хочу отобразить имя файла, когда пользователь загружает файл.

Используя контактную форму 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>

Имя файла должно отображаться рядом с меткой.

Ответы [ 4 ]

2 голосов
/ 17 апреля 2019

Вы можете использовать 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>
1 голос
/ 17 апреля 2019

Вот пользовательский <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>
1 голос
/ 17 апреля 2019

Вы можете получить доступ к имени файла следующим образом: 

<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>
0 голосов
/ 17 апреля 2019 
    <!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);
        }
    }
...