vue中将上传文件样式自定义

最新推荐文章于 2025-10-15 15:35:47 发布

原创最新推荐文章于 2025-10-15 15:35:47 发布 · 902 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5

vue 专栏收录该内容

9 篇文章

订阅专栏

这篇博客探讨了如何解决HTML中file类型input标签样式不美观的问题，通过将其设置为隐藏并绑定父元素点击事件来触发上传。作者详细介绍了如何在JavaScript中模拟点击事件，以便在不改变input外观的情况下，实现文件选择功能。同时，还展示了在文件读取完成后解析JSON数据并发送到后台的处理流程。

本地文件上传都是通过input标签,type属性是file,这样就会很丑,在许多地方都有局限性

<input type="file"
              style=" visibility: hidden;position: absolute;top: 0px;width: 0px;"
              ref="importJson"
              @change="getFile"  />

将input隐藏,就不会显示本来的样式,这样就出现一个问题,我们也点击不到input
给input父元素添加点击事件,触发input点击事件

this.$refs.importJson.dispatchEvent(new MouseEvent("click"));

这样就可以触发input上点击事件了

getFile() {
      var that = this;
      const inputFile = this.$refs.importJson.files[0];
      var reader = new FileReader();
      reader.readAsText(inputFile);
      reader.onload = function () {
        let json = JSON.parse(this.result);
     that.$bus.emit("downloadAllRegionData","importJson",json);
      };
    },