web端如何自定义上传文件的样式及获取文件数据

Ango-go

已于 2022-03-02 14:49:01 修改

阅读量334

点赞数

CC 4.0 BY-SA版权

文章标签：前端

于 2022-03-02 14:46:21 首次发布

本文链接：https://blog.csdn.net/weixin_39675478/article/details/123230105

本文探讨了如何改进web端文件上传的实现方式，从传统的DOM+JS隐藏input标签的方法，转向使用@lingw/pick-file包，实现更简洁的代码和自定义按钮样式。通过这个npm包，可以轻松实现文件选择的样式定制，并提供了方便的数据获取方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要自定义选择文件样式的时候，一直都是使用dom + js的方式，隐藏一个input标签，然后用别的dom写样式去调用input标签，后面一直在想能不能直接调用js去实现，代码写起来更舒服，然后就改进了下使用方式

原来实现方式

<div class="container">
  <div
    class="btn"
    style="
      background: #ccffff;
      padding: 20px;
      border-radius: 5px;
      display: inline-block;
    "
    onclick="pick()"
  >
    选择文件
  </div>
  <input type="file" id="input" style="display: none" onchange="change(this)" />
</div>

function change(e) {
  console.log(e.files);
}
function pick() {
  let input = document.querySelector("#input");
  input.click();
}

改进实现方式

安装@lingw/pick-file包

import pickFile from "@lingw/pick-file"

pickFile().then(files =>{
    console.log(files);
})

按钮样式自定义即可

npm仓库地址：https://www.npmjs.com/package/@lingw/pick-file