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>
复制代码











            

            
posted @ 
 
MySomeDay 
阅读(1613) 
评论(0) 
编辑 
收藏 
举报


        

        
        




    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· Linux系列：如何用 C#调用 C方法造成内存泄露
    

· AI与.NET技术实操系列（二）：开始使用ML.NET
    

· 记一次.NET内存居高不下排查解决与启示
    

· 探究高空视频全景AR技术的实现原理
    

· 理解Rust引用及其生命周期标识（上）
    



    

    阅读排行：
    

 ·          DeepSeek 开源周回顾「GitHub 热点速览」
        

 ·          物流快递公司核心技术能力-地址解析分单基础技术分享
        

 ·          .NET 10首个预览版发布：重大改进与新特性概览！
        

 ·          AI与.NET技术实操系列（二）：开始使用ML.NET
        

 ·          单线程的Redis速度为什么快？
        



    

    



    



            

        


        
        

    

    

    




    

    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
AI FOR CODE 大赛