<input type="file" name="img1" id="img1">
<input type="text" name="file_name" id="file_name">
我想要的是一旦我在输入类型="文件"中选择文件，我想要在文本框中获得文件名(name="file_name")，而无需任何单击或提交按钮。我想不出它的密码。请提供我的代码和想法
<input type="file" name="img1" id="img1" onchange="document.getElementById('file_name').value = this.value">
<input type="text" name="file_name" id="file_name">
如果想去掉c:'fakepath，可以在this.value的末尾加上.split('''').pop()
不含c:'fakepath
<input type="file" name="img1" id="img1" onchange="document.getElementById('file_name').value = this.value.split('''').pop().split('/').pop()">
<input type="text" name="file_name" id="file_name">
你可以在jquery中像这样使用onchange
$("#img1").change(function(e){
$("#file_name").val($("#img1").val().split('''').pop().split('/').pop(););
});
在html
的<head>中添加这一行<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
下面将只显示file_name文本框中的文件名。
<input type="file" name="img1" id="img1" onchange="updateFileName()">
<input type="text" name="file_name" id="file_name">
<script>
function updateFileName() {
var img1 = document.getElementById('img1');
var file_name = document.getElementById('file_name');
var fileNameIndex = img1.value.lastIndexOf("''");
file_name.value = img1.value.substring(fileNameIndex + 1);
}
</script>
JsFiddle
这将使用jQuery显示文件名
$("#img1").change(function(e){
var fname=$("#img1").val().split('''').pop().split('/').pop();
$('#file_name').val(fname);
});
yourFileInputNode.on('change', function(e){
var file = e.target.files[0];
// you can get file name from file var and set it anewhere
})
<input type="file" name="img1" id="img1" onchange="updateFileName()"><br><input type="hidden" name="file_name" id="file_name"><script>
function updateFileName() {
var img1 = document.getElementById('img1');
var file_name = document.getElementById('file_name');
var fileNameIndex = img1.value.lastIndexOf("''");
file_name.value = img1.value.substring(fileNameIndex + 1);
}
</script>