css控件透明属性设置IE firefor设置方法
<STYLE type=text/css>
.upfilefield{position:absolute; FILTER: alpha(opacity:0);-moz-opacity:0.5;opacity: 0; width:88px; height:29px; top:0px; right:0px;}
</STYLE>

导入:<input type="file" name="file" id="file" class="easyui-validatebox" data-options="required:true" style="position:absolute; FILTER: alpha(opacity:0);-moz-opacity:0.5;opacity: 0;width:150px;"/>
<input type="button" onclick="chooseFile()" value="选择EXCEL表" style="border:none;" />

ie 设置为FILTER: alpha(opacity:0);
firefor 设置为-moz-opacity:0.5;opacity: 0;

function chooseFile(){
document.getElementById("file").click();
}

function fileOnChange()
{
var array1=$('#file').val().split('\\');
var fileName=array1[array1.length-1];
$('#txtFileName').val(fileName);
}

将导入按钮选择文件修改为“选择EXCEL表”

<div style="float:left;width:25px;height:10px;"></div><div style="width:270px;float:left">导入:<input type="file" name="file" id="file" style="position:absolute;width:120px;" class="easyui-validatebox" data-options="required:true" onchange="fileOnChange()" />
<input type="button" onclick="chooseFile()" value="选择EXCEL表" style="border:none;width:120px;" /><input type="text" id="txtFileName" name="txtFileName" style="width:108px;border:none;" readonly="readonly" /></div>
<div style="float:left;"> <input type="button" name="btnsc" id="btnsc" value="上传" class="but20" />
<span style="text-align:right;"><input type="button" name="but" value="模板下载" class="but30" onclick="DownloadTemplate()" />
<input type="button" name="cs" value="查看参数" class="but30" onclick="CheckParams()" /></span></div>

会有个bug:在ie下,单击按钮前半部分无反应:因为在ie下file控件必须单击浏览按钮才可

css控制file控件透明 漂浮的更多相关文章

  1. File控件杂谈

    我们通常使用<input type='file'/>来实现网页中文件上传功能,用户可以通过点击file控件选择本地文件,当我们提交包含该控件的表单时,浏览器会向服务器发送用户选中的文件. ...

  2. 美化type="file"控件

    对于type="file"而言是一个不大好看的控件.如果不美化他一下,总感觉自己的网站有些缺乏了美感 上代码: <!DOCTYPE html> <html> ...

  3. 美化 input type=file控件

    大家都知道input的type=file控件默认样式是不能修改的 可以通过一个小技巧处理下 html: <a href="javascript:;" class=" ...

  4. 混合开发 webview 中file 控件 点击后无反应解决方法

    最近在做个项目 ,需要 使用 file 控件上传 图片到服务器 ,在手机浏览器中 可以正常选择照片,但是放到 android 应用中的webview中,file 控件点击后就没有反应. 百度了一番后, ...

  5. File控件选择图片的时候在Html5下马上预览

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

  6. input的file 控件及美化

    在一些网站进行上传时,当单击了“浏览”按钮之后会弹出[选择文件]的对话框.想要实现这一功能,用input的file控件来实现就好啦~ <!doctype html> <html la ...

  7. 怎么清除file控件的文件路径

    还记得上次做一个文件上传,后来测试告诉我说,如果我要是不选择文件了呢?该怎么办?我说:简单啊,做一个取消按钮不就完事了吗!然后我就想一个file空间做一个取消是多么简单的事,用js处理可是想怎么样就怎 ...

  8. 为什么Jquery对input file控件的onchange事件只生效一次

    今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...

  9. file控件change事件触发问题

    最近,项目中需要用到一个图片上传的功能,我用的file控件来选取图片文件,然后利用js读取文件来预览图片,最后再根据用户的操作来决定是否上传文件. 其中碰到了一个奇怪的问题:在选取完第一张图片,并上传 ...

随机推荐

  1. 记一次oracle crs无法重启事故

    今天在修改了数据库参数后,关闭数据库及crs,然后重新启动了服务器,服务器启动完成之后,发现数据库无法启动,过程如下: step1:重启数据库 $ su - grid $ srvctl stop da ...

  2. C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字

    这篇文章是 GDI+ 总结系列的第三篇,如果对 GDI+ 的基础使用不熟悉的朋友可以先看第一篇文章<C# 使用 GDI+ 画图>. 需求 需求是要实现给图片添加任意角度旋转的文字,文字的旋 ...

  3. react-native-image-picker 运用launchCamera直接调取摄像头的缺陷及修复

    在前几天用react-native进行android版本开发当中,用到了"react-native-image-picker"的插件:根据业务的需求:点击按钮-->直接调取摄 ...

  4. Linux实战案例(3)创建和删除用户

    建用户: adduser phpq                            //新建phpq用户passwd phpq                            //给php ...

  5. NHibernate从入门到精通系列(3)——第一个NHibernate应用程序

    内容摘要 准备工作 开发流程 程序开发 一.准备工作 1.1开发环境 开发工具:VS2008以上,我使用的是VS2010 数据库:任意关系型数据库,我使用的是SQL Server 2005 Expre ...

  6. iOS HTML图片本地预览

    引言 相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理. 关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容 ...

  7. python Josnp(跨域)

    python Josnp(跨域) 所谓的跨域就是进行不用域名内的请求,好比如说我在A域名想访问B域名的内容就是一种跨域的行为. 但是在我们浏览器端会有一个同源策略的设置,这个同源策略只对Ajax请求有 ...

  8. Django ORM创建数据库

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

  9. github生成SSH公钥

    ssh-keygen -t rsa -C "your_email@youremail.com" 然后输入github上的密码 Enter passphrase (empty for ...

  10. 算子:sample(false, 0.1)抽样数据

    抽样示例操作: scala> import org.apache.spark.sql.hive.HiveContext import org.apache.spark.sql.hive.Hive ...