在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>
分享到：
相关推荐
通过以上方法，我们可以对`<input type="file">`上传控件进行样式美化，创建出符合网页设计风格的上传界面。但请注意，虽然我们可以改变控件的外观，但其核心功能和交互仍受浏览器安全策略的限制。在设计时，要兼顾...
为了自定义控件的外观，我们可以利用CSS来覆盖默认样式，例如隐藏原生的文件输入框，然后创建一个更美观的按钮或区域作为触发上传的元素。同时，可以通过JavaScript或者jQuery添加额外的功能，如预览图片、显示...
在HTML中，`<input type="file">`元素是默认的文件上传控件，但它的样式和功能有限。为了自定义，我们可以使用CSS来改变其外观，例如设置边框、背景色、字体等，甚至可以利用绝对定位隐藏原始的文件选择按钮，然后...
在HTML结构中，我们通常会隐藏原生的file input，然后在上面覆盖一个自定义样式的按钮和一个用于显示文件路径的文本框，以便用户点击这个“按钮”来打开文件选择对话框。这里的“假”上传按钮（.file-uploader-wrap-...
在网页开发中，HTML的`<input type="file">`控件用于实现文件上传功能，但它的默认样式通常较为简陋，无法满足现代网页设计的需求。"jquery封装的input file控件"是一种解决方法，通过jQuery库来改进文件上传控件的...
在IT行业中，自定义控件是开发者为了满足特定需求，根据项目或应用的特性而创建的用户界面元素。本文将详细探讨如何实现一个自定义图片上传控件，以避免在不同项目中重复编写相似的代码。 一、自定义控件的基本概念...
在Windows Forms或WPF等.NET框架中，虽然内置的`ImageButton`控件可能并不常见，但在自定义控件开发中，我们可以通过继承`Button`类并添加图像显示功能来创建它。 下面我们将分步骤介绍创建自定义`ImageButton`控件...
- `<input type="file" id="f" ...>`：这是实际的文件输入控件，通过设置`style="position:absolute;filter:alpha(opacity=0);"`使其不可见。 2. **自定义按钮**： - `<input type="button" ...>`：这是一个...
这个CSS样式使得`<input type="file">`看起来像一个自定义的按钮，而实际的文件选择控件被隐藏，只保留文字提示。通过这种方式，我们可以改变`<input type="file">`元素的外观，使其更好地融入网页的设计风格。 ...
在网页开发中，`<input type="file">`标签是一个常用元素，用于让用户选择本地文件进行上传。然而，浏览器默认的文件选择控件样式通常较为简单，无法满足设计师们对界面美观度和交互体验的高要求。为了实现自定义的...
Bootstrap File Input是一款强大的文件上传控件，专为Bootstrap框架设计，提供美观且功能丰富的文件选择、预览和上传功能。这个离线文档包含了该控件的详细信息，帮助开发者在没有网络连接的情况下也能深入理解和...
最近在使用画布处理图像像素时用到了file上传控件，发现了file上传控件的两个兼容性问题。一个是file上传控件在火狐下无法通过css改变width，另一个是file上传控件在不同的浏览器下的外观和行为都不一样。 下面是...
在网页设计中，上传控件（`<input type="file">`）是用户与服务器交互的重要元素，用于选择本地文件并将其发送到服务器。然而，HTML原生的上传控件样式通常较为简单，不符合现代网页设计的需求。因此，对上传控件...
- 通过File菜单中的New选项，选择MXML Component新建一个自定义控件项目。 - 在新弹出的对话框中输入组件名称，并选择该组件将继承的基础类型，例如Canvas、DataGrid、ComboBox等。 2. **设计控件界面**： - ...
1. **文件选择**：组件通常会包含一个`input[type="file"]`元素，用于触发文件选择对话框。用户选择Excel文件后，文件信息会被暴露在`change`事件中，可以通过`event.target.files`获取。 2. **文件预览**：为了...
在提供的文件名 "filamentgroup-jQuery-Custom-File-Input-87dfca9" 中，"filamentgroup" 是一个知名的前端开发团队，他们创建了一个名为 jQuery Custom File Input 的库，用于自定义文件上传按钮的样式和交互。...
1. **隐藏原始文件输入框**：由于浏览器对`<input type="file">`的样式支持有限，我们通常会用一个自定义的按钮覆盖它，然后使用JavaScript来触发文件选择。例如： ```css input[type="file"] { display: none; ...
传统的HTML `<input type="file">` 标签往往样式单一，难以满足设计需求，而题目中提到的解决方案则解决了这一问题，允许开发者对上传控件的样式进行自定义，以匹配网站的整体设计风格，提升视觉效果。 其中，"带...
因此，对 `input type=file` 进行自定义样式处理是非常有必要的。 #### 一、基本语法介绍 在HTML中，`<input>` 元素通过 `type` 属性来指定不同的输入类型，其中 `type="file"` 表示文件输入类型。基本用法如下： ...