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. SSH 配置

    ssh免密通用配置 Host * Port 1234 User root #ProxyCommand nc -X 5 -x 127.0.0.1:1081 %h %p #5 socks5, 4 sock ...

  2. 什么是MQTT协议?

    MQTT协议介绍 MQTT协议是什么? MQTT(Message Queuing Telemetry Transport Protocol)的全称是消息队列遥感传输协议的缩写,是一种基于轻量级代理的发 ...

  3. centos虚拟机nat模式,可以上内网,不能上外网

    http://sky425509.iteye.com/blog/1996085 我这边的问题是,好久没用虚拟机了,重启之后,变成了dhcp模式,整个网卡配置变了. 重新配置了静态ip,网关,dns后才 ...

  4. servlet2.3/2.5/3.0/3.1的xml名称空间备忘

    The web.xml is a configuration file to describe how a web application should be deployed. Here’re 5  ...

  5. 浅谈 DML、DDL、DCL的区别

    一.DML DML(data manipulation language)数据操纵语言: 就是我们最经常用到的 SELECT.UPDATE.INSERT.DELETE. 主要用来对数据库的数据进行一些 ...

  6. python基础——多态与多态性

    python基础--多态与多态性 1 多态 多态指的是一类事物有多种形态,(一个抽象类有多个子类,因而多态的概念依赖于继承) 1. 序列类型有多种形态:字符串,列表,元组. 2. 动物有多种形态:人, ...

  7. Http读书笔记1-5章

    第一章 内容提要 这一章主要介绍了什么是http以及http是干嘛的,以及与之有关的相关概念,当然了这些概念都是概览式的介绍一些.所以我将采用问答式的方式描述这一章! Q:http是干嘛的? A:ht ...

  8. 一 Unicode和UTF-8的异同

    下面就是我的笔记,主要用来整理自己的思路.但是,我尽量试图写得通俗易懂,希望能对其他朋友有用.毕竟,字符编码是计算机技术的基石,想要熟练使用计算机,就必须懂得一点字符编码的知识.1. ASCII码我们 ...

  9. YII2框架下使用PHPExcel导出柱状图

    导出结果: 首先,到官网下载PHPExcel插件包,下载后文件夹如下: 将Classes文件夹放入到项目公共方法内. 新建控制器(访问导出的方法):EntryandexitController < ...

  10. JS随机数不重复

    方法一 思路:首先创建一个1到3000的数组,每次取一个数,然后去除数组中取出的这个数, 这样就可以实现永不重复. var count=3000; var originalArray=new Arra ...