Передача имени файла из файла в текстовое поле

У меня есть часть формы, где пользователь может загрузить файл. Я хочу, чтобы только имя файла было отправлено в текстовое поле в той же форме. Поэтому, если пользователь загрузил "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 - это поле для загрузки файла, а filename - текстовое поле, в котором должно появляться имя. Любая помощь вообще ценится! Спасибо.

Ответ 1

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

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" />

Ответ 2

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

Ответ 3

Более короткий путь в 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() выполнит оставшуюся часть работы, скопировав файл "только текст ввода только для чтения".