构建自定义上传框

Question

我正在尝试在上面构建类似的输入。我很难找到自定义文件上传的资源。我想要实现的是，一旦选择了一个文件，Icon就显示在文件上方，并提供在上传之前删除它的选项。

任何人都有资源我可以查看或者知道实现这个目标的方法吗？

Answer 1

自定义文件上传按钮是一种常见的烦恼。出于某种原因，它由浏览器和＆amp ;; OS。基本上，你必须隐藏它并用你的按钮替换它。

将按钮包裹在HTML中的div中：

<div class="upload-btn-wrapper">
  <button class="btn">Upload a file</button>
  <input type="file" name="myfile" />
</div>

在你的CSS中：

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
  font-size: 500px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

原始按钮被放大到500px（只是一个很大的数字，所以它占据了整个div），并且它的div被div隐藏了。这样，整个div将触发文件上传事件。不透明度设置为0以在视觉上隐藏它，但仍然渲染元素。