在WEB
上传文件时，要用到
上传框<input type="file"/>
这东东在IE(其他偶没经过测试)中是一个非常特殊的对象。如果是您手动写入的或其他对象经过某些事件触发填入的值由于安全问题，在进行提交表单时，往往会被清空，所以上传失败。简单点说，除非你的鼠标亲自点到了上传框f上，IE才会给你上传文件！
哪怕你将 f 的onclick句柄赋给某个对象，如：
<input type="file" id="f" name="f">
<input onclick="f.click()" value="点击">
你 “点击” 后，同样会弹出文件选择对话框，可惜失望地：你照样不能上传文件！怎么办呢？
<body onmousemove="f.style.pixelLeft=event.x-200;f.style.pixelTop=event.y-10;">
<input type="text"><input type="button" onmousemove="">
<input type="file" id="f" name="f" style="position:absolute;">
</body>
随便点击鼠标，看到效果了吧？<input type="file"/>跟随我们的鼠标移动，基于上面的思路，偶们就可以把它弄到一个button下面就OK了！！
<style>
input{border:1px solid green;}
</style>
<input type="text" id="txt" name="txt">
<input type="button" value="请选择文件" size="30"
onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;">
<input type="file" id="f" name="f" style="position:absolute;" size="1"
onChange="txt.value=this.value">
为了达到真正模拟的效果，还得要把f给隐藏，加个不透明的alpha 滤镜即可，再加上 hidefocus 属性，隐藏f的虚线：
<style>
input{border:1px solid green;}
</style>
<input type="text" id="txt" name="txt">
<input type="button" value="请选择文件" size="30" onclick="f.click()"
onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" >
<input type="file" id="f" onchange="txt.value=this.value" name="f"
style="position:absolute;filter:alpha(opacity=0);" size="1" hidefocus>
可以看下opacity=0改为稍大些的效果。现在你就可以控制它们的样式、位置了，不过这种方式只用于IE，下面是一个可以兼容FF IE Chrome的写法
<style type="text/css">
.ifile {
position: absolute;
height: 25px;
opacity: 0;
filter: alpha(opacity = 0);
-moz-opacity: 0;
width: 360px;
margin-top: 4px;
}
</style>
<!-- txtfilename和upfilename的size应该一样，完全遮盖 -->
<input type="file" name="upfilename" id="upfilename" size="50" class="ifile"
onchange="txtfilename.value=this.value; ">
<input name="txtfilename" type="text" class="box" id="txtfilename" size="50"
readonly style="height: 25px;" />
<span class="title" style="width: 80%">
<img src="upload.gif" width="100" height="25" align="absmiddle"
onclick="upfilename.click();" style="z-index: 999;" />
</span>
分享到：
相关推荐
最近在使用画布处理图像像素时用到了file上传控件，发现了file上传控件的两个兼容性问题。一个是file上传控件在火狐下无法通过css改变width，另一个是file上传控件在不同的浏览器下的外观和行为都不一样。 下面是...
最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。...在我的自定义input文件上传样式里就已经实现里单文件上传，并且
处于安全上的考虑，input[type="file"] 的文件选择按钮样式并不能随意修改(不过可以修改input 的透明度)，可能会跟设计师的设计格格不入，这时可以使用透明效果来自定义上传按钮
3.3.3 InputFile控件 42 3.3.4 HtmlGenericControl 控件 43 3.4 ASP.NET2.0新增控件 45 3.4.1 ImageMap控件 45 3.4.2 FileUpload控件 48 3.5 客户端处理 52 3.5.1 第一种方式示例： 52 3.5.2第二种方式：动态注册...
你是否老觉得html里的文件域的浏览按钮太难看呢？这个是我做的浏览组件，可以自定义图片按钮，随心所欲的改变<input type="file" />的默认按钮样式。 你可以在这个控件上做更大的开发，可用于商业用途。
4，用input type=“file” 获取文件地址。可以上传多个视频，或文件夹，（过滤非MP4） 5，实现全屏，及全屏修改自定义控制栏样式 6，由于浏览器全屏时不能获取有关节点，则监听窗口变化并判断是否全屏来确定是否...
引语：大家都知道，html中上传文件就一个input，type=file就搞定了。但是，这个标签的样式，实在不值得提点什么，要改动他的样式，恐怕也是较难的。但是其实挺简单，今天就来说说上传文件小技巧吧！ 1. 怎样自定义...
4、创建 input 标记 -- <input/> 2、标记(元素)的嵌套 在一对标记中，允许出现另外一对(一个)标记 <标记1> <标记2>标记2> 标记1> 注意：嵌套标记的书写格式 -- 被嵌套的标记要通过一个 缩进键(Tab) 来...
form表单元素包括：text 文本输入框，password密码输入框，checkbox复选框，radio单选框，file 文件域，submit表单提交action指向的文件，reset表单清空，image图片提交按钮，button按钮，hidden隐藏域。 select ...
public File getFile() { return file; } 2.4.2 @PrimaryKeyField 在实合格bean和数据库对照过程中，数据库机制需要识别主键，所以需要我们在主键的对应属性的Geter方法中加上@PrimaryKeyFiled注解，如： ...
5.16 取得目前File与Cache的路径 5.17 打开/关闭WiFi服务 5.18 取得SIM卡内的信息 5.19 调用拨号按钮 5.20 DPAD按键处理 5.21 任务管理器正在运行的程序 5.22 动态更改屏幕方向 5.23 系统设置更改事件 5.24 取得电信...
5.16 取得目前File与Cache的路径 5.17 打开/关闭WiFi服务 5.18 取得SIM卡内的信息 5.19 调用拨号按钮 5.20 DPAD按键处理 5.21 任务管理器正在运行的程序 5.22 动态更改屏幕方向 5.23 系统设置更改事件 5.24 取得电信...
5.16 取得目前File与Cache的路径 5.17 打开/关闭WiFi服务 5.18 取得SIM卡内的信息 5.19 调用拨号按钮 5.20 DPAD按键处理 5.21 任务管理器正在运行的程序 5.22 动态更改屏幕方向 5.23 系统设置更改事件 5.24 取得电信...
5.16 取得目前File与Cache的路径 5.17 打开/关闭WiFi服务 5.18 取得SIM卡内的信息 5.19 调用拨号按钮 5.20 DPAD按键处理 5.21 任务管理器正在运行的程序 5.22 动态更改屏幕方向 5.23 系统设置更改事件 5.24 取得电信...
3.6 样式化的定型对象 30 .3.7 简易的按钮事件 32 3.8 手机页面的转换 34 3.9 调用另一个activity 37 3.10 不同activity之间的数据传递 41 3.11 返回数据到前一个activity 44 3.12 具有交互功能...
style标签里的第一个样式 document.styleSheets[0].rules[0] 防止点击空链接时，页面往往重置到页首端。 ()">word 上一网页源 asp: request.servervariables("HTTP_REFERER") javascript: document....