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. 【 bzoj4537】HNOI2016 最小公倍数

    首先将边按a的值分组,每$\sqrt{m}$一组. 对于每一组,将符合一组a的询问选出来,将这些询问和这一块之前的边(a一定小于这些询问)按b排序,然后交替插入,询问,对于一个询问,在当前块也有可能有 ...

  2. [MySQL]mysql指定路径启动

    /usr/sbin/mysqld --defaults-file=/etc/mysql/my.cnf --basedir=/usr --datadir=/var/lib/mysql --pid-fil ...

  3. Java Web EL JSTL的用法

    1.导入包 fastjson-1.2.2.jar 2.JSP文件加入 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" p ...

  4. 将MPLS编译进linux内核中

    系统环境:linux kernel 2.6.35.(此环境是上一篇文章中将ubuntu内核替换后的环境) 编译过程如下: 1)首先需要下载patch文件:linux-kernel-v2.6.35-mp ...

  5. Storm学习笔记六

    1 Storm的通信机制 说明:1.worker与worker之间跨进程通信: 2.worker内部中各个executor间的通信,Task对象--->输入队列queue--->执行--- ...

  6. 2.14. 删除托管对象（Core Data 应用程序实践指南）

    删除托管对象,只要调用托管对象上下文的deleteObject 或 deleteObjects就可以了.同样,真正的删除,要在调用save:之后.

  7. QT第四天学习

    回顾: 1.信号与槽 public slots: //先声明后实现 signals: //只需要声明 connect(sender,SIGNAL(signal()),receiver,SLOT(slo ...

  8. JIRA描述默认值设置

    JIRA描述默认值设置 Setting a Default Value in the Description Field 转自https://confluence.atlassian.com/jira ...

  9. BNU Online Judge-34776-What does the fox say?

    题目链接 http://www.bnuoj.com/bnuoj/problem_show.php?pid=34776 题意: fox 的叫声 例如测试用例 输入 toot woof wa ow ow ...

  10. Error while registering Oracle JDBC Diagnosabilityh

    Error while registering Oracle JDBC Diagnosability 把ojdbc6.jar换成ojdbc14.jar就可以了: 后来发现又没有问题了:不过据说这个是数 ...