修改上传附件样式

小小1992

已于 2022-08-16 16:35:16 修改

阅读量336

点赞数

分类专栏： css 文章标签： css

于 2022-08-16 16:21:48 首次发布

本文链接：https://blog.csdn.net/u014645827/article/details/126368815

版权

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
#file_name{
width: 400px;
height: 30px;
}
a.input {
width:70px;
height:30px;
line-height:30px;
background:#3091d1;
text-align:center;
display:inline-block;/*具有行内元素的视觉，块级元素的属性宽高*/
overflow:hidden;/*去掉的话，输入框也可以点击*/
position:relative;/*相对定位，为 #file 的绝对定位准备*/
top:10px;
}
a.input:hover {
background:#31b0d5;
color: #ffffff;
}
a{
text-decoration:none;
color:#FFF;
}
#file {
opacity:0;/*设置此控件透明度为零，即完全透明*/
filter:alpha(opacity=0);/*设置此控件透明度为零，即完全透明针对IE*/
font-size:100px;
position:absolute;/*绝对定位，相对于 .input */
top:0;
right:0;
}
</style>
</head>
<body>
<input type="text" id="file_name" readonly="readonly" value="" />
<a href="javascript:void(0);" class="input">
浏览
<input type="file" id="file" name="document[file]">
</a>
       <script src="js/jquery-1.4.4.min.js"></script>
       <script type="text/javascript">
       $(function(){
       $("#file").change(function(){ // 当 id 为 file 的对象发生变化时
       var fileSize = this.files[0].size;
       var size = fileSize / 1024 / 1024;
       if (size > 5) {
       alert("附件不能大于5M,请将文件压缩后重新上传！");
       this.value="";
       return false;
       }else{
       $("#file_name").val($("#file").val()); //将 #file 的值赋给 #file_name
       }
       })
       });

       </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" οnchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上传" />
</form>
</div>
</body>
</html>

小小1992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
修改上传附件样式

/将 #file 的值赋给 #file_name。$("#file").change(function(){ // 当 id 为 file 的对象发生变化时。/*设置此控件透明度为零，即完全透明针对IE*//*具有行内元素的视觉，块级元素的属性宽高*//*相对定位，为 #file 的绝对定位准备*//*绝对定位，相对于 .input *//*去掉的话，输入框也可以点击*//*设置此控件透明度为零，即完全透明*/......
复制链接

扫一扫

专栏目录