如何实现点击div区域，即可上传图片，并在div中显示图片？

Question

<div style="border: 1px solid ;overflow: hidden;position: relative;display: inline-block;"><input type="file"  id="file"  accept="image/*"  /></div>

Answer 1

对于input file 各个浏览器获取的值不同。。

ie的老版本可以获取完整路径，现在很多浏览器从安全角度考虑，已经不能获取完整路径了 。。

没有路径自然就没办法显示 了。

结合后端才可以吧 。

Answer 2

把div改成label，或直接在div的外面加一层label都行。

另外，你可以把input隐藏起来，用css——style="display: none;"。你可以给div设置任何喜欢的样式了。

在div中显示你上传的图片要用js来做，这个你可以到网上查查。

把div改成label

<label style="border: 5px solid #af0; overflow: hidden; position: relative; display: inline-block; width: 100px; height: 30px; background: #0fa; border-radius: 70% 0;">

<input type="file"  id="file"  accept="image/*" style="display: none;" />

</label>

div的外面加一层label

<label>

    <div style="border: 5px solid #af0; overflow: hidden; position: relative; display: inline-block; width: 100px; height: 30px; background: #0fa; border-radius: 70% 0;">

    <input type="file"  id="file"  accept="image/*" style="display: none;" />

    </div>

</label>