我有一个表单的一部分,用户可以上传文件。我只想将文件名发送到同一表单的文本字段。因此,如果用户上传了“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是应显示名称的文本字段。任何帮助都表示赞赏!谢谢。
这是一种方法
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);
});
演示:
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;
}
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()
将完成其余工作,将文件复制为“只读输入文本”。