HTML原生的input file 上传按钮有多（无）不（力）漂（吐）亮（槽）我就不多说了。大家几乎在项目中都会有遇到图片、等文件需要上传的地方，好看的文件上传按钮会使人身心愉悦（我瞎说的）。好了不多废话了，今天就教大家使用Jquery配合CSS写出一个美化文件上传按钮效果的教程。

效果如下图：

直接上完整代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

     <title>HTML Input file美化</title>

     <style type="text/css">

         a{text-decoration:none;}

         a[class="button-selectimg"],input[type='submit']{color:#00A2D4;padding:4px 6px;border:1px dashed #00A2D4;border-radius:2px;}

         .input-file{margin:200px 300px;}

         input[id="avatval"]{padding:3px 6px;padding-left:10px;border:1px solid #E7EAEC;width:230px;height:25px;line-height:25px;border-left:3px solid #3FB7EB;background:#FAFAFB;border-radius:2px;}

         input[type='file']{border:0px;display:none;}

     </style>

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <script type="text/javascript">

         $(function(){

             $("#avatsel").click(function(){

                 $("input[type='file']").trigger('click');

             });

             $("#avatval").click(function(){

                 $("input[type='file']").trigger('click');

             });

             $("input[type='file']").change(function(){

                 $("#avatval").val($(this).val());

             });

         });

     </script>

 </head>

 <body>

     <div class="input-file">

         <form action="input.html" method="get" enctype="multipart/form-data">

             <input type="text" id="avatval" placeholder="请选择文件···" readonly="readonly" style="vertical-align: middle;"/>

             <input type="file" name="avatar" id="avatar"/>

             <a href="javascript:void(0);" class="button-selectimg" id="avatsel">选择文件</a>

             <input type="submit" name="" id="" value="提交" />

         </form>

     </div>

 </body>

 </html>

表单提交后的效果，如下图：

博主留言：请尊重他人劳动成果，转载请注明文章出处。

当前文章链接：http://www.cnblogs.com/hollow/p/6420813.html

Input file 文本框美化的更多相关文章

  1. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

  2. HTML中让表单input等文本框为只读不可编辑但可以获取value值的方法；让文本域前面的内容显示在左上角，居中

      HTML中让表单input等文本框为只读不可编辑的方法 有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使input text的内容,中国两个字不可以修改   有时候,我们希望 ...

  3. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  4. HTML中让表单input等文本框为只读不可编辑的方法

    有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value=&qu ...

  5. 让表单input等文本框为只读不可编辑的方法-转

    有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value=&qu ...

  6. 将input 的文本框改为不可编辑状态

    <input type="text" id = "textid" name="名称" value="值" size ...

  7. input(file)浏览按钮美化 (巨简单），网上那些都弱爆了

    <!DOCTYPE HTML> <html> <body> <input type="file" id="upload" ...

  8. input _文本框回车或者失去光标触发事件

    IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获. onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件. 了解这一 ...

  9. Input禁用文本框

    <input type="text" readonly="readonly" /> readonly:只读属性:

随机推荐

  1. 2016年最全面的VR资源盘点，不只有VR视频播放器还有具体到步骤的VR资源

    2016年过去了,有多少人开始使用VR来观看我们喜欢的视频资源呢?比传统视频更高的沉浸感,甚至在VR眼镜的视角中,自己仿佛化生成视频中的主角一般.然而,这种体验只有VR眼镜还是不行的,还需要有一个VR ...

  2. Leetcode 182. Duplicate Emails

    Write a SQL query to find all duplicate emails in a table named Person. +----+---------+ | Id | Emai ...

  3. java实现——005从尾到头打印链表

    import java.util.Stack; public class T005 { public static void main(String[] args){ Node n1 = new No ...

  4. javascript---jquery (1事件)

    1.例子说明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  5. 谈谈Session会话和Cookie

    Session Session在我们的网络应用中就是一种客户端与服务器端保持状态的解决方案 Session对象,就是客户端浏览器与服务器之间建立的互动信息状态.每一个不同的用户连接将得到不同的Sess ...

  6. iOS 之 事件响应者链

    响应者链表示一系列的响应者对象.事件被交由第一个响应者对象处理,如果第一个响应者不处理,事件就沿着响应者链向上传递,交由下一个响应者(Next responder). View->ViewCon ...

  7. Delphi中String类型原理介绍

    Delphi中字符串的操作很简单,但幕后情况却相当复杂.Pascal传统的字符串操作方法与Windows不同,Windows吸取了C语言的字符串操作方法.32位Delphi中增加了长字符串类型,该类型 ...

  8. 结合social relationship的推荐系统（持续更新）

    最近看了一些结合社会关系的推荐系统,把论文罗列一下: (TidalTrust) Generating predictive movie recommendations from trust in so ...

  9. c# silverlight

    分享 tsc 条码打印机 打印控件 调用方法 , c# silverlight 下载 TSCLIB.dll http://download.csdn.net/detail/peiyu_peiyu/47 ...

  10. promise/bluebird源码

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/bluebirdsource 本博客同步在http://www.cnb ...