Javascript 将文件名从文件上传传递到文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5480934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass filename from file upload to text field
提问by Fusionice
I have a part of a form where a user can upload a file. I want only the filename to be sent to a text field in the same form. So if user uploaded "C:/Folder/image.jpg", the text field should show "image.jpg". I tried some code myself but I know it's wrong:
我有一个表单的一部分，用户可以在其中上传文件。我只想将文件名以相同的形式发送到文本字段。因此，如果用户上传“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 is the field to upload file, and filename is the textfield where name should appear. Any help at all is appreciated! Thanks.
ff_uploadimages 是上传文件的字段，filename 是应该出现名称的文本字段。任何帮助都表示赞赏！谢谢。
回答by MikeM
Here's one way to do it
这是一种方法
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" />you don't mention jQuery but given it's popularity here's the same solution using jQuery
你没有提到 jQuery 但考虑到它的流行，这里是使用 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);
});
Demo:
演示：
回答by Jesus Erwin Suarez
HTML:
HTML：
<input id="upload" type="file" onChange="uploadOnChange(this)" />
<input id="filename" type="text" />
JS:
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;
}
回答by Hendrik Clercx
A shorter way in jQuery would be the following:
jQuery 中更短的方法如下：
HTML
HTML
<input type="file" id="inputFile" class="hidden"/>
<input type="text" id="inputDisplayFileName" readonly/>
<button id="buttonChooseFile">Choose file</button>
jQuery
jQuery
$("#buttonChooseFile").click(funtion()({
$("#inputFile").click();
});
$("#inputFile").change(function(){
var fileName = $("#inputFile").prop('files')[0]["name"];
$("inputDisplayFileName").val(fileName);
});
In this example the default file upload is hidden so that you can style the 'upload file input' as desired. Clicking the button will trigger the original (hidden) file upload. After choosing the file the .onchange()will do the rest of the work, copying the file the 'read only input text'.
在此示例中，默认文件上传是隐藏的，因此您可以根据需要设置“上传文件输入”的样式。单击该按钮将触发原始（隐藏）文件上传。选择文件后，.onchange()将完成剩下的工作，将文件复制为“只读输入文本”。
