获取文件名
document.getElementById('upload').files[0].name;
获取文件路径
document.getElementById('upload').value;
页面效果
原生代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>文件名：</span>
<input type="text" id="doc">
<button>选择文件</button>
<input type="file" id="upload" onchange="getFile(value)"
style="opacity: 0.5; margin-left: -74px; width: 74px;">
</body>
</html>
<script>
function getFile(value){
// 获取文本框dom
var doc = document.getElementById('doc');
// 获取上传控件dom
var upload = document.getElementById('upload');
// 获取文件名
var fileName = upload.files[0].name;
// 获取文件路径
var filePath = upload.value;
// 将文件名载入文本框
doc.value = fileName;
console.log(fileName);
console.log(filePath);
}
</script>
vue代码
<template>
<div>
<span>文件名：</span>
<input type="text" ref="filePath">
<button>选择文件</button>
<input type="file" ref="upload"
name="file" class="upload"
@change="getFileNameToText" multiple="multiplt"
/>
</div>
</template>
<script>
export default {
methods: {
getFileNameToText() {
// 获取上传控件dom
var fileObj = this.$refs['upload'];
// 获取文件名
var fileName = fileObj.files[0].name;
// 获取文件路径
var filePath = fileObj.value;
// 将文件名载入文本框
this.$refs['filePath'].value = fileName;
console.log(fileName, 'fileName');
console.log(filePath, 'filePath');
}
},
};
</script>
<style scoped>
.upload {
opacity: 0;
width: 74px;
margin-left: -74px;
}
</style>
