获取文件名
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){// 获取文本框domvar doc = document.getElementById('doc');// 获取上传控件domvar 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() {// 获取上传控件domvar 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>
