input type=file 获取选择文件名称、路径方法及input上传按钮美化本文已参与「新人创作礼」活动，一起开启

本文已参与「新人创作礼」活动，一起开启掘金创作之路

我们在项目开发中经常会遇到上传文件的情况，但奈何原生的文件名在按钮后面，不符合人们的使用习惯，

所以我们今天就来简单的改造一下它。

改造后效果：

改造思路

先搭建一个想要效果的页面结构，即：文件名：输入框上传控件；

在这里插入图片描述

然后，将上传控件隐藏，浮动盖在按钮上（注意调整上传控件大小，确保完全覆盖在按钮上）。这样当用户点击按键的时候实际上就是点击的上传控件。

最后，通过dom操作获取选择的文件名（或路径）填入前面的输入框，即可完成上传控件的改造。

获取文件名：

        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>