ajax上传文件--按钮显示小手

最新推荐文章于 2024-11-07 13:38:59 发布

weixin_30338481

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量94

点赞数

文章标签： javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/huzhiming/archive/2012/12/25/2831890.html

版权

最近开发一个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>