将图像div设置为输入以上传图像

Question

我想获得方形图像的效果，当您单击它时，您将能够从文件中选择另一个图像来替换该图像。

所以我有这个图像div：

<div class="uploader boxCorners">
   <div class="imagePreview"> <img src="http://i.pravatar.cc/500?img=7"/></div>
</div>

当点击imagePreview时，我需要能够上传另一张图片。

我知道您使用以下文件上传文件：

<input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />

如何将图像设置为输入（不使用该丑陋的上传按钮）并将其替换为新图像？

Answer 1

您可以尝试这样的事情：

• 创建相对容器
• 将绝对定位的文件输入拉伸到父容器的各个角落
• 在图像上设置pip uninstall numpy ，以使点击到达输入

conda install -c conda-forge numpy

pointer-events: none

jsFiddle