input type=file 获取选择文件名称、路径方法及input上传按钮美化

最新推荐文章于 2023-03-07 14:14:55 发布

爱划水de鲸鱼哥～

最新推荐文章于 2023-03-07 14:14:55 发布

阅读量1.6w

点赞数 5

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_47901007/article/details/121995985

版权

获取文件名

        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>