zoukankan      html  css  js  c++  java
  • html文件上传控件file自定义样式

    问题:

    HTML自带的file上传按钮因在各种浏览器里显示样式不一、不易自定义样式给我们带来很大的麻烦。


    解决思路:

    将input[type=file]控件隐藏,使用一个input[type=text]和button组合作为file控件的替代(样式自行定义),并将隐藏的file控件和作为替代的text和button控件做事件同步关联,这样我们在操作text和button的时候,同时触发file控件,表单提交时,file控件提交。


    示例代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </head>
    <body>
    <form name="frm" id="frm" action="/remote_service/upload2/parseRuleFilePath.htm" method="post" enctype="multipart/form-data">
        <input type="text" name="fileShowName" id="fileShowName" readonly="readonly" />
        <!-- 按钮的onclick事件关联file的onclick事件,点击按钮效果等同于点击file控件 -->
        <input type="button" id="fileButton" name="fileButton" value="浏览" onclick="$('#submitFile').click();" />
        <!-- 隐藏的file控件值改变时同步更新到text上 -->
        <input name="submitFile" id="submitFile" type="file" style="display: none;"
                       onchange="$('#fileShowName').val($(this).val());" />
        <input type="submit" value="提交" />
    </form>
    </body>
    </html>
    
    
    
    
    
    
  • 相关阅读:
    10. 正则表达式匹配(动态规划)
    8. 字符串转换整数 (atoi)
    5. 最长回文子串
    4. 寻找两个正序数组的中位数
    1109. 航班预订统计
    计算机网络面试整理
    HTTP 响应 代码
    Tomcat 安装 2019.1.20
    ubuntu 编译 jdk (三)
    ubuntu 编译 jdk (二)
  • 原文地址:https://www.cnblogs.com/haoqipeng/p/html-file-class.html
Copyright © 2011-2022 走看看