<html>
<head>
<script src="http://yui.yahooapis.com/3.7.2/build/yui/yui-min.js"></script>
</head>
<script>
YUI().use('node-event-simulate','node','event',function(Y){
Y.one('#div1').on('mousemove',function(e){
e.preventDefault();
e.stopPropagation();
var width = Y.one('#file').getStyle('width');
Y.one('#file').setStyle('top',e.clientY-25);
Y.one('#file').setStyle('left',e.clientX-parseInt(width,10));
})
Y.one('#file').on('change',function(e){
})
})
</script>
<body>
<div id="div1" style="background:url(http://cdn4.iconfinder.com/data/icons/dellios_system_icons/png_128/arrow-up.png);
position: relative;
overflow: hidden;height: 128px;
cursor: pointer;
width: 128px;">
<form id="form" target="test_iframe1" action="http://127.0.0.1:8020/test" method="post" enctype="multipart/form-data">
<input title="upload" hidefocus="true" type="file" id="file" name="file" style="cursor:pointer;position:absolute;filter:alpha(opacity=0);opacity:0"/>
<input type="submit" value="submit"/>
</form>
</div>
<iframe name="test_iframe1" style="display:none"></iframe>
</body>
</html>
主要思路
1.把input=file设为透明
2.鼠标移在图片上时让input=file浮在图片上随着鼠标走
3监控input=file的onchange事件将form表单提交
4提交到隐藏的iframe上让页面无刷新
相关说明：
1.hidefocus=true，在IE中input=file浮在图片上点击时会有虚线框出现，用hidefocus=true即可隐藏
2.position:absolute;width:10px，input=file绝对定位
3.filter:alpha(opacity=0);opacity:0，让input=file透明
4.cursor:pointer，input=file鼠标手势
浙公网安备 33010602011771号