最近开发一个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="500px;margin:100px auto;"> <!-- 按钮相关标签结构在下面的a标签中--> <a href="javascript:void(0);" style="display:block;100px;height:45px;position:relative;overflow:hidden;text-decoration:none;"> <!--下面的按钮就是所看到的按钮--> <input type="button" value="上传" style="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>