在开发项目过程中会碰到不同浏览器input file样式不一样。

经过分析,打算都用IE上面的附件上传样式,


 方案如下:

1、在IE下截个如上面的上传按钮,并保存。

2、判断浏览器类型,如果是非IE,则将页面上的input 设置为近乎透明,然后将图片放在上面。

不用修改原有代码,渲染时会扫描页面的input file 然后进行样式覆盖。

代码如下

css:

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
} input.file {
width: 208px;
position: relative;
text-align: right;
-moz-opacity: 0;
filter: alpha(opacity : 0);
opacity: 0;
z-index: 2;
}

js代码:

/**
* 附件上传样式自定义,解决不同浏览器附件上传框样式不一样问题
*/
function initFileUploads() {
if($.browser&&$.browser.msie) return;
$("input[type=file]").each(function(){
if($(this).parent().attr("class")!='fileinputs') return;
$(this).attr("class","file");
var obj=$("<div class='fakefile'><input ct='file'/><img style='padding-bottom:4px;' src='common/image/upload.png'><div>");
$(this).after(obj);
$(this).parent().find("input[ct=file]").width($(this).width()-65);
$(this).on("change",function(){
$(($(this).parent().find("input"))[1]).val($(this).val());
})
});
}
$(document).ready(function(){
initFileUploads();
})

不同浏览器input file样式不一样的更多相关文章

  1. 自定义input file样式

    自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...

  2. input:file样式怎样修改

    问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...

  3. input file样式修改,图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  4. input(file)样式修改及上传文件名显示

    实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 ...

  5. input file 样式以及获取选择文件方法集合

    样式一(http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html) <style> a{display: ...

  6. input file样式美化

    默认样式: <input type="file" /> 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 .box{ po ...

  7. input.file样式修改

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 修改input:file样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

  10. 巧妙利用label标签实现input file上传文件自定义样式

    提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可    但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同   我们往 ...

随机推荐

  1. 数据标注工具 doccano

    目录 安装 运行 doccano 使用 doccanno 上传数据 定义标签 添加成员 开始标注 导出数据 查看数据 统计 数据标注工具 Label-Studio 安装 打开命令行(cmd.termi ...

  2. 将PaddleOCR 转为 ONNX 运行

    PaddleOCR 是目前最好的开源OCR框架, 但paddle框架的兼容性实在不怎么好, 部署的时候容易出现各种各样的问题. 如果能把PaddleOCR转成ONNX, 就可以跳过paddle框架坑的 ...

  3. 使用Spleete进行人声与背景声分离

    安装:https://pypi.org/project/spleeter/ 下载权重: 2sterms.tar.gz https://github.com/deezer/spleeter/releas ...

  4. manim边学边做--MathTex

    上一篇介绍的SingleStringMathTex主要用来显示只有一行的数学公式,对于复杂的数学公式,可以使用MathTex类. MathTex类继承自SingleStringMathTex,在其基础 ...

  5. 【论文阅读】BEVFormer: Learning Bird's-Eye-View Representation from Multi-Camera Images via Spatiotemporal

    论文题目:BEVFormer: Learning Bird's-Eye-View Representation from Multi-Camera Images via Spatiotemporal ...

  6. 利用SpringBoot+rabbitmq 实现邮件异步发送,保证100%投递成功

    在之前的文章中,我们详细介绍了 SpringBoot 整合 mail 实现各类邮件的自动推送服务. 但是这类服务通常不稳定,当出现网络异常的时候,会导致邮件推送失败. 本篇文章将介绍另一种高可靠的服务 ...

  7. 机器学习策略篇:详解如何使用来自不同分布的数据,进行训练和测试(Training and testing on different distributions)

    如何使用来自不同分布的数据,进行训练和测试 深度学习算法对训练数据的胃口很大,当收集到足够多带标签的数据构成训练集时,算法效果最好,这导致很多团队用尽一切办法收集数据,然后把它们堆到训练集里,让训练的 ...

  8. react懒加载,减少首屏加载时间

    最近在写一个react-ant-admin的集成框架用于快速搭载中后台项目.其中遇到很多问题,最重要的应该是访问速度了.我就想 react 可不可以和 vue 一样用路由懒加载来减少首页渲染所花费的时 ...

  9. HBase 在统一内容平台业务的优化实践

    作者:来自 vivo 互联网服务器团队-Leng Jianyu.Huang Haitao HBase是一款开源高可靠性.扩展性.高性能和灵活性的分布式非关系型数据库,本文围绕数据库选型以及使用HBas ...

  10. [oeasy]python0098_个人计算机浪潮_IBM5100_微软成立_苹果II_VisCalc

    个人计算机浪潮 回忆上次内容 个人电脑(PC) 在爱好者之间疯传 人人都有一台计算机 从attair-8800到apple-1 个人电脑 离普通人 更近了 如果 人人都有 自己的电脑 谁还去 用终端连 ...