将文件上传的文件名传递到文本字段

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是上传文件的字段，文件名是名称应该出现的文本字段。如有任何帮助，我们将不胜感激！谢谢。

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() 将完成其余工作，将文件复制为“只读输入文本”。