ajax上传文件--按钮显示小手
最近开发一个html5 断点续传功能，需要自定义一个上传按钮，就是不能使用浏览器自带的那个比较丑陋的file标签当做用户选择文件的按钮，看了下各大网站，发现最好的办法就是设置file标签为透明，覆盖在一个自定义好的按钮上，使用户感觉点击的是自定义按钮，其实就是点击的file标签，使用个定位很容易实现，但问题来了，可点击的按钮通常需要显示小手，给file加个小手样式，不管用，因为他的浏览按钮前面那部分永远显示输入光标状态，然后就想到把file的预览按钮定位到自定义按钮上，结果样式出现了各种头疼问题，最后还是完美解决了，具体看下面代码，注意看注释哦！！！
注意：可能有人会说直接用个自定义标签被点击是执行以下一个隐藏file标签的click方法就ok了，其实这不是很完满的实现，这样选择进去的文件在ie下是没法通过表单提交到服务端的，由于浏览器安全限制，必须是用户点击的file标签选择的文件才能post到后端。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <title>ajax上传文件--按钮显示小手</title> </head> <body> <div style="width:500px;margin:100px auto;"> <!-- 按钮相关标签结构在下面的a标签中--> <a href="javascript:void(0);" style="display:block;width:100px;height:45px;position:relative;overflow:hidden;text-decoration:none;"> <!--下面的按钮就是所看到的按钮--> <input type="button" value="上传" style="width:100px;height:45px;font-size:20px;"> <!--下面的file标签设置为完全透明覆盖在上面的按钮上，用户点击按钮其实就是点击的file标签，为了让鼠标在按钮上所有浏览器都显示小手，我们必须把file标签的预览按钮定位到按钮上，而且要足够大;注意：这里千万别给file标签加width样式，否则你的小手样式将无法兼容所有浏览器--> <input type="file" name="file" style="height:45px;font-size:100px;position:absolute;cursor:pointer;top:0;right:0;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;z-index:2;"> </a> </div> </body> </html>
