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. Github上的600多个iOS开源类库

    Github上的600多个iOS开源类库,入下图所示,里面有很多资源,学习积累的好资源 地址:http://github.ibireme.com/github/list/ios/

  2. html 上传文件

    1.html代码 <form id="form1" action="TestYield" method="post" enctype= ...

  3. ARM处理器简介

    参考: http://www.arm.com/zh/products/processors/instruction-set-architectures/index.php 1.ARM核演变图 2.AR ...

  4. leetcode day8

    [83] Remove Duplicates from Sorted List Given a sorted linked list, delete all duplicates such that ...

  5. iOS bug 之 H5 页面没有弹出提示框

    描述:在安卓上有提示框,但是在iOS上没有提示框. step 1: 失误,是我没有在正确的位置设置网址. step 2: 修改之后,测试页能弹出提示框,但是正式的页面没有提示框. step 3: 我输 ...

  6. gec210 NAND BOOT与SD BOOT启动原理

    CPU上电后,此时SP指针指向0x0000_0000,从这个地址取第一条指令.但此时:PLL没有启动,CPU工作频率为外部输入晶振频率,非常低(S5PV210中晶振在CPU旁边,两颗24MHz,一颗2 ...

  7. VS2013 F12无法转到函数的定义处，总是从“元数据”获取的问题 ——解决方法

    右键项目名称-->点击菜单中的"添加"-->点击"引用"-->在弹出窗中点击"解决方案"下的"项目", ...

  8. C-Sharp网络编程案例解析（Socket类的使用）

    Server端: using System; using System.Collections.Generic; using System.Text; using System.Net; using ...

  9. delphi DBgrid应用大全

    Delphi 语言的数据库编程中,DBGrid 是显示数据的主要手段之一.但是 DBGrid 缺省的外观未免显得单调和缺乏创意.其实,我们完全可以在我们的程序中通过编程来达到美化DBGrid 外观的目 ...

  10. 日期、时间选择器（DatePicker和TimePicker）的功能与用法

    DatePicker和TimePicker是两个比较易用的控件,它们都从FrameLayout派生而来,其中DatePicker供用户选择日期:而TimePicker则供用户选择时间. DatePic ...