bootstrap input file在火狐浏览器中不美观

23 篇文章 0 订阅

使用bootstrap 遇到的问题

(1)上传文件控件在火狐中显示不美观

 以下是期望的效果:

 

解决办法:

在页面的onload事件里面判断浏览器的类型,若是火狐浏览器,则修改样式:

 <script type="text/javascript">
        //适配File 在火狐中不美观的问题
        var fileInputAdapt=function(inputFile222){//style="padding-top: 0px; border: none;box-shadow:none"
            var brow=$.browser;
            if(brow.mozilla){//Firefox
                inputFile222.style.border='none';
                inputFile222.style.boxShadow='none';
                inputFile222.style.paddingTop='0px';
            }
        };
 window.οnlοad=function(){
  fileInputAdapt(com.whuang.hsj.$$id('exampleInputFile'));
}
 </script>

 最后在火狐浏览器中的效果:

 

 

(2)下拉框在IE 中不美观



 解决方法:

 //解决每页多少条的下拉框在IE中不美观的问题
        var brow=$.browser;
        if(brow.msie){
            com.whuang.hsj.$$id('select22Id').style.paddingRight='0';
        }

 最后的效果:

 

(3)boostrap 导航在IE8中不兼容

在IE8中的界面:

进入页面时

 展开和收起过程中,出现黑色背景:

 

 解决导航栏背景是黑色:

在head中添加

 <!--[if IE 8 ]>  <link rel="stylesheet" href="css/ie8_yunma.css"> <![endif]-->

 ie8_yunma.css的内容:

A {
    background-color:white;
}

 注意:只有在IE8中才会引用 ie8_yunma.css

 

解决边框是黑色的问题,现象如下:

 解决方法:

</body> 标签的后面添加:

 <!--[if IE 8 ]>
<script >
    var ie8_ok=function(){//当浏览器是IE8才执行
        var brow=$.browser;

        if(brow.msie){
            $('ul.secondNavigate').css('border-bottom-color','#ddd');//导航菜单边框是透明的
            $('ul.secondNavigate').css('border-left-color','#ddd');//导航菜单边框是透明的
        }};
</script>

    <![endif]-->

 同时在window.onload方法中添加:

  var brow=$.browser;
        if(brow.msie && ie8_ok && ie8_ok!=undefined){//当浏览器是IE,并且IE版本是8才执行
            ie8_ok();
        }

 

 

 

解决展开和收起时背景有黑色的问题:

  

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 由于安全性考虑,浏览器不允许通过JavaScript获取input type=file的文件内容。因此,你需要使用其他方法来获取该文件内容。 一种可行的方法是使用HTML5的File API。以下是一个使用jQuery和File API获取文件内容的示例: HTML代码: ``` <input type="file" id="fileInput"> <button id="btn">获取文件内容</button> <div id="fileContent"></div> ``` JavaScript代码: ``` $(function() { $('#btn').click(function() { var file = $('#fileInput')[0].files[0]; if (file) { var reader = new FileReader(); reader.onload = function(e) { $('#fileContent').text(e.target.result); }; reader.readAsText(file); } else { $('#fileContent').text('请选择文件'); } }); }); ``` 这段代码首先获取了input type=file元素的文件对象,然后使用FileReader对象读取该文件内容,并将其显示在页面上。请注意,由于安全性限制,该代码只能在本地运行,无法在某些环境使用。 ### 回答2: 使用Bootstrap无法直接获取input type=file的文件内容,因为Bootstrap是一个前端框架,主要用于构建页面结构和样式。而获取input type=file的文件内容需要使用JavaScript来实现。 要获取input type=file的文件内容,可以使用以下步骤: 1. 通过JavaScript获取input元素,可以使用document.getElementById或者document.querySelector来获取指定的input元素。 2. 给input元素添加change事件监听器,当用户选择了文件后会触发change事件。 3. 在change事件的处理函数,可以通过event.target.files[0]来获取选择的文件。event.target是事件的目标元素,files属性是一个文件列表,[0]表示获取选的第一个文件。 4. 可以使用FileReader对象来读取文件内容,通过FileReader.onload事件监听文件内容的读取完成。 5. 在FileReader.onload事件的处理函数,可以通过event.target.result来获取文件内容,result是一个字符串表示文件的内容。 具体代码如下: ```html <input type="file" id="myFile"> <script> document.getElementById('myFile').addEventListener('change', function(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(event) { var content = event.target.result; console.log(content); }; reader.readAsText(file); // 以文本形式读取文件内容 }); </script> ``` 以上代码是一个简单示例,当用户选择了文件后,会将文件内容输出到控制台。实际应用,可以根据需要将内容显示到页面或进行其他处理。 ### 回答3: 要使用Bootstrap获取`<input type="file">`的文件内容,可以通过以下步骤来实现: 1. 在HTML定义一个`<input>`元素,并设置`type="file"`属性。这将创建一个文件上传按钮,用于选择要上传的文件。 ```html <input type="file" id="fileUpload"> ``` 2. 在JavaScript,找到这个`<input>`元素,并添加一个`change`事件监听器,以便在选择文件后触发相应的操作。 ```javascript $(document).ready(function() { $("#fileUpload").change(function() { var file = this.files[0]; // 获取选择的文件 var reader = new FileReader(); reader.onload = function(e) { var fileContent = e.target.result; // 获取文件内容 // 这里可以对文件内容进行处理或展示 }; reader.readAsText(file); // 以文本形式读取文件内容 }); }); ``` 3. 在`change`事件监听器创建一个`FileReader`对象,并为其设置一个`onload`事件。当文件加载完成后,`onload`事件将被触发。 4. 在`onload`事件,可以通过`e.target.result`来获取文件的内容。根据需求,可以对文件内容进行进一步的处理或展示。 需要注意的是,使用Bootstrap只是用来美化或优化页面样式和布局。要获取文件内容,仍然需要使用JavaScript的`FileReader`对象来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值