问题定义：
在浏览器中如何点击图片弹出文件选择框呢，就像新浪微博一样，点击图片就直接弹出选择文件框？
实现思路：
我们可以将file input控件设置成完全透明，然后，加入一个自定义的浏览按钮，可以是图片。然后，我们定义这个按钮的onmousemove属性，捕获到鼠标移动到上面的时候，我们就将透明的file input控件盖在上面，这样，如果我们点击了，那将点击file input控件，就能弹出文件选择框了。由于file input是透明的，给用户的感觉就是点击了自定义图片而弹出的文件选择框。
实现代码：
图片地址可改成自己的地址。这只是Demo
<body>
<input type="file" id="browse" size="1" style="position: absolute; width: 10px; filter: alpha(opacity=0);
opacity: 0; top: 0px;" />
<img id="imgBlog" src="upload.gif" align="absmiddle" />
<script>
function ss() {
var img = document.getElementById("imgBlog");
var file = document.getElementById('browse');
img.onmousemove = function(e) {
var x, y;
if (e) { x = e.clientX; y = e.clientY; }
else { x = event.x; y = event.y; }
window.status = x + "," + y;
file.style.left = (x - 10) + 'px';
file.style.top = (y - 10) + 'px';
};
};
ss();
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
