您的位置：首页 > Web前端 > CSS

html文件上传控件file自定义样式

2016-01-30 16:33 666 查看

问题：

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>






                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html
                                                file
                                                javascript
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航