修改默认上传文件样式

来源：互联网发布：用友u8用什么数据库编辑：程序博客网时间：2024/06/06 15:46
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>修改自定义上传按钮样式</title><script type="text/javascript" src="jquery-1.7.2.min.js"></script><style type="text/css">* {margin:0;padding:0;}body {font:14px Verdana, Arial, Geneva, sans-serif;color:#404040;background:#f9f9f9;}.main{width:300px;height:60px;position:absolute;}.box{position:relative;float:left;}input.uploadFile{position:absolute;right:0px;top:0px;opacity:0;filter:alpha(opacity=0);cursor:pointer;width:276px;height:36px;overflow: hidden;}input.textbox{float:left;padding:5px;color:#999;height:24px;line-height:24px;border:1px #ccc solid;width:200px;margin-right:4px;}a.link{float:left;display:inline-block;padding:4px 16px;color:#fff;font:14px;cursor:pointer;background-color:#3adade;line-height:28px;text-decoration:none;}</style></head><body><div class="main">        <div class="box">            <input type="text" name="copyFile"  class="textbox" />            <a href="javascript:void(0);"  class="link">浏览</a>            <input type="file" class="uploadFile" name="upload" onchange="getFile(this,'copyFile')"/>        </div>        <script type="text/javascript">function getFile(obj,inputName){var file_name = $(obj).val();$("input[name='"+inputName+"']").val(file_name);}        </script>    </div></body></html>
0 0