zoukankan      html  css  js  c++  java
  • 文件上传按钮(改写样式)

     http://www.zhangxinxu.com/wordpress/?p=1923   基于HTML5的可预览多图片Ajax上传  2015-10-19

    <input id="fileImage" type="file" size="30" name="fileselect[]" multiple />

    下面是以前的 

    <div class="form-line">
        <!-- 文件上传按钮 -->
        <input id="img1" name="img1" type="file" class="btn-file-hidden" onchange="file_text1.innerHTML=this.value"/>
        <label for="img1" class="btn-24 w76 btn-color-blue l">浏览</label>
        <label for="img1" class="input-26 w370 l" id="file_text1"/></label>
        <a href="javascript:;" class="btn-24 w64 btn-color-blue r">上传</a>
        <!-- 文件上传按钮,end -->
    </div>
    <!-- 这种写法不好 -->
    <
    div class="form-line"> <div class="btn-file-box l"> <a href="javascript:;" class="btn-24 w76 btn-color-blue l" style="display:block;">浏览</a><input type="text" id="file_text3" name="" class="input-26 w370 l"/> <input type="file" name="" onchange="file_text3.value=this.value" class="btn-file" /> </div> <a href="javascript:;" class="btn-24 w64 btn-color-blue r">上传</a> <div style="clear:both;"></div> </div> <style> .pg-fillin .form-line{vertical-align: middle;font-size: 14px;min-height:24px;line-height:24px;margin:0px 0px 26px 0px;text-align:left; white-space:nowrap;} </style>

     /********************[2.1本站样式,按钮库]*********************/
    .btn-color-gray{color:#333;background:#f3f3f3;border:1px solid #c7c7c7;}
    .btn-color-blue{color:#FFF;background:#4096ee;border:1px solid #1c6cbe;}
    .btn-color-white{color:#a8a8a8;background:#f8f8f8;border:1px solid #dddddd;}
    .btn-color-red{color:#FFF;background:#990033;border:1px solid #710127;}
    
    .btn-24{height:24px;line-height:24px;font-size:14px;font-family:'宋体';text-align:center;text-decoration: none;display:inline-block;}
    .btn-40{height:40px;line-height:40px;font-size:16px;font-family:'microsoft yahei';text-align:center;text-decoration: none;display:inline-block;}
    .btn-42{height:42px;line-height:42px;font-size:18px;font-family:'microsoft yahei';text-align:center;text-decoration: none;display:inline-block;}
    
    .btn-file{position:absolute;overflow:hidden;right:0px;font-size:200px;width:100%;height:100%;margin:0px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
    .btn-file-box{position:relative;white-space:nowrap;overflow:hidden;display:inline-block;}
    .btn-file-hidden{display:none;}
    
    .input-30{height:30px;padding:1px 1px 1px 5px;border:1px solid #ccc;}
    .input-26{height:22px;padding:1px 1px 1px 5px;border:1px solid #ccc;}
  • 相关阅读:
    [转]c#的DateTime.Now函数详解
    PHP学习笔记
    【错误】MsDepSvc.exe 站用了80端口/IIS的0×8ffe2740错误解决方
    IIS连接数
    Mybatis3.2.1整合Spring3.1
    linux常用命令大全
    Spring3.2新注解@ControllerAdvice
    SpringMVC强大的数据绑定(2)——第六章 注解式控制器详解
    Console命令详解,让调试js代码变得更简单
    String.format
  • 原文地址:https://www.cnblogs.com/qq21270/p/3544375.html
Copyright © 2011-2022 走看看