Передать имя файла из файла загрузки в текстовое поле - PullRequest
Новая
       26

Передать имя файла из файла загрузки в текстовое поле

10 голосов
/ 30 марта 2011

У меня есть часть формы, где пользователь может загрузить файл.Я хочу, чтобы только имя файла было отправлено в текстовое поле в той же форме.Поэтому, если пользователь загрузил «C: /Folder/image.jpg», в текстовом поле должно отображаться «image.jpg».Я сам попробовал какой-то код, но знаю, что это неправильно: 

function ff_uploadimages_action(element, action)
{var m = data.match(/((*):\/)/(.*)[\/\\]([^\/\\]+\.\w+)$/);
switch (action) {
case 'change':
if (data.match(/((*):\/)/(.*)[\/\\]([^\/\\]+\.\w+)$/).value)
ff_getElementByName('filename').value = m[2].text;
        default:;
    } // switch
} // ff_uploadimages_action

ff_uploadimages - это поле для загрузки файла, а имя файла - это текстовое поле, в котором должно отображаться имя.Любая помощь на всех приветствуется!Спасибо.

Ответы [ 3 ]

30 голосов
/ 30 марта 2011

Вот один из способов сделать это 

document.getElementById('upload').onchange = uploadOnChange;

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  document.getElementById('filename').value = filename;
}
<input id="upload" type="file" />
<input id="filename" type="text" />

вы не упоминаете jQuery, но, учитывая его популярность, вот то же решение, использующее jQuery

JQuery: 

$('#upload').change(function() {
    var filename = $(this).val();
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    $('#filename').val(filename);
});

Демо-версия:

http://jsfiddle.net/pxfunc/WWNnV/4/

0 голосов
/ 18 ноября 2017

Более короткий путь в jQuery будет следующим:

HTML 

<input type="file" id="inputFile" class="hidden"/>
<input type="text" id="inputDisplayFileName" readonly/>
<button id="buttonChooseFile">Choose file</button>

jQuery 

$("#buttonChooseFile").click(funtion()({
    $("#inputFile").click();        
});

$("#inputFile").change(function(){
    var fileName = $("#inputFile").prop('files')[0]["name"];

    $("inputDisplayFileName").val(fileName);
});

В этом примере загрузка файла по умолчанию скрыта, так что вы можете выбрать «ввод файла загрузки» по желанию.Нажатие на кнопку приведет к загрузке исходного (скрытого) файла.После выбора файла .onchange() выполнит остальную часть работы, скопировав файл «только для чтения входного текста».

0 голосов
/ 21 июля 2016

HTML: 

<input id="upload" type="file" onChange="uploadOnChange(this)" />
<input id="filename" type="text" />

JS: 

function uploadOnChange(e) {
    var filename = e.value;var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex +1);
    }
    document.getElementById('filename').value = filename;
}
...