css - 如何增加输入文件元素的面积？

Question

我正在使用一些样式来增加输入文件元素的区域。为了便于将文件拖放到这个元素，我想增加它的面积。使用 css 属性 width 和 height 会增加区域，但是有没有办法将选择文件对齐到中间或中心。

<div id="container">

<input type=file style="border: 1px solid black; width: 400px; height: 400px;">

</div>

是否可以仅使用 css 和 html 来实现这样的目标？我很感激任何帮助！

标签： csshtml

Answer 1

您可以使用 CSS 使 Drag&Drop 部分成为整个容器的大小：

.file {
  height: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.file-input {
  width: 100%;
  height: 100%  
}

<div class="file">
  <input class="file-input" type="file">
</div>

但是为了使“预览”居中并让所有区域都可以拖放，您必须使用 Js，这里有一个 CodePen，您可以作为基础：https ://codepen.io/prasanjit/pen/NxjZMO 。