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. c++读取REG_MULTI_SZ类型注册表

    First: run RegQueryValueEx to get type and necessary memory size: Single byte code: DWORD type, size ...

  2. select取值问题

    全栈攻城狮们给挖了各种坑..其中一个典型是select控件取值.直接上代码: <!DOCTYPE html> <html lang="en"> <he ...

  3. random 函数

    Random()在Delphi中,有一随机函数,是这样定义的:function Random [ ( Range: Integer) ]; 其中,参数Range为一整数,该函数返回值也为整数,其范围为 ...

  4. IP头，TCP头，UDP头，MAC帧头定义（转）

    源:IP头,TCP头,UDP头,MAC帧头定义 一.MAC帧头定义 /*数据帧定义,头14个字节,尾4个字节*/ typedef struct _MAC_FRAME_HEADER { ]; //目的m ...

  5. 2017-01-11小程序form表单提交

    小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...

  6. C#中BASE64和图片相互转换

    //图片 转为    base64编码的文本        private void button1_Click(object sender, EventArgs e)        {        ...

  7. 如何解决Ajax跨域问题-1

    如何解决Ajax跨域问题 最近在做AJAX调用C的问题,出现跨域问题,学习总结如下: 在做ajax读取数据的时候,经常会遇到ajax需要跨域的问题,但由于浏览器安全方面的限制,XMLHttpReque ...

  8. iOS 更改启动视图

    TMMainViewCtrl *main = [[TMMainViewCtrl alloc] init]; self.window.rootViewController = main;

  9. 请使用支持 JDBC 4.0 的 sqljdbc4.jar 类库

    转载请使用支持 JDBC 4.0 的 sqljdbc4.jar 类库 1.下载最新的JDBC(2012/3/6) http://www.microsoft.com/downloads/zh-cn/de ...

  10. [c#]解决方案：需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping。

    问题详情 如下图所示(部分): 出现该错误,是因为应用程序中需要使用到jquery(现在的web应用程序哪个能离开jquery呢),而目前程序目录中并没有jquery文件,或者有jquery文件但是程 ...