如何实现点击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>