• 文件上传按钮(改写样式)


     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;}
  • 相关阅读:
    python3.0与python2.0有哪些不同
    python常用内置模块,执行系统命令的模块
    06python 之基本数据类型
    python语言简介、解释器、字符编码介绍
    http协议&接口规范&接口测试入门
    基于APPIUM测试微信公众号的UI自动化测试框架(结合Allure2测试报告框架)
    SQL注入工具sqlmap的注入过程记录
    unittest框架
    测试转型之路--学习ing
    Tomcat分析-启动过程
  • 原文地址:https://www.cnblogs.com/qq21270/p/3544375.html
Copyright © 2020-2023  润新知