JavaScript-点击一个图片弹出文件选择进行上传，怎么做?

Question

<img src="a.jpg">

有这样一个图片，我想现实的是，当点击这个图片的时候，实现自动弹出<inut type="file">的动作，弹出文件选择框，选完直接上传。

1. 用纯js和html怎么实现?

2. 用html和jquery怎么实现?

Answer 1

我的想法，不知道行不行，将input file定位到图片上,可以用Z-index，设置大小和图片大小相等，设置visibility:hidden

Answer 2

两部分，一个是选择文件，一个是选完直接上传。
选择文件简单来说可以用html，<label>，不过要注意浏览器兼容性。或者在图片上绑定onclick事件，在处理事件的时候激活一个<input>。
直接上传的话，在<input>上面绑定一个onchange应该就行。
jquery其实也就是包装好的js

Answer 3

针对ie说一下，ie>=9,可以用一个div把form表单放进去，然后隐藏，点击图片时调用file的click事件，如果想选完文件就上传，给file增加onchange事件。
ie<9，form表单进行透明化，然后定位，讲file控件和图片重叠在一起。