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. iOS开发——闪光灯

    还是那句很欠揍的话,没啥难度,直接上代码. // //  ViewController.m //  Demo—闪光灯 // //  Created by yyt on 16/4/21. //  Cop ...

  2. RoundedImageView使用吐槽心得(RoundedImageView与Glide加载图片,第一次加载无法圆角问题)

    最近使用的时候发现一个问题, RoundedImageView与Glide搭配使用的时候,第一次加载图片(内存中没有),后图片无法圆角,后来尝试各种改,最后想到了一个办法,就是让Glide加载图片的 ...

  3. RabbitMQ消息队列（三）：任务分发机制

    在上篇文章中,我们解决了从发送端(Producer)向接收端(Consumer)发送“Hello World”的问题.在实际的应用场景中,这是远远不够的.从本篇文章开始,我们将结合更加实际的应用场景来 ...

  4. SpringMVC常用注解@Controller,@Service,@repository,@Component

    SpringMVC常用注解@Controller,@Service,@repository,@Component controller层使用@controller注解 @Controller 用于标记 ...

  5. bzoj 1036

    1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 11858  Solved: 4803[Submit ...

  6. spring security 跨域防伪攻击

    applicationContext-security.xml中配置 <http use-expressions="true" disable-url-rewriting=& ...

  7. --@angularjs-- $location.path('/login')-$location服务用法示例

    $httpProvider interceptor .factory('auth403', ['$rootScope', '$q', '$location', function auth403($ro ...

  8. HDU-2031-进制转换

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2031 进制转换 Time Limit: 2000/1000 MS (Java/Others)    M ...

  9. 部署Sharding分片

    这是一种将海量的数据水平扩展的数据库集群系统,数据分表存储在sharding 的各个节点上,使用者通过简单的配置就可以很方便地构建一个分布式MongoDB 集群. MongoDB 的数据分块称为 ch ...

  10. css全局样式表

    http://blog.csdn.net/baok1592/article/details/6448378