获取文件名

        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>
# javascript # 前端 # vue.js
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟
cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟