將文件名從文件上傳傳遞到文本字段

Question

我有一個表單的一部分，用戶可以上傳文件。 我只想將文件名發送到同一表單的文本字段。 因此，如果用戶上傳了“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是應顯示名稱的文本字段。 任何幫助都表示贊賞！ 謝謝。

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

---

你沒有提到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/

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

Answer 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()將完成剩下的工作，將文件復制為“只讀輸入文本”。