在WEB上传文件时，要用到上传框：
<input type="file" id="f" name="f">
这东东在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>
随便点击鼠标，看到效果了吧？
基于上面的思路，偶们就可以把它弄到一个button下面就OK了！！
<style>
input{border:1px solid green;}
</style>
<BODY>
<BR><BR><BR>
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="txt" name="txt">
<input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="请选择文件" size="30">
<input type="file" id="f" name="f" style="position:absolute;" size="1" onChange="txt.value=this.value"><BR>
<INPUT TYPE="submit">
</form>
</BODY>
为了达到真正模拟的效果，还得要把f给隐藏，加个不透明的alpha 滤镜即可，再加上 hidefocus 属性，隐藏f的虚线：
<style>
input{border:1px solid green;}
</style>
<BODY>
<BR><BR><BR>
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="txt" name="txt">
<input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="请选择文件" size="30" onclick="f.click()">
<input type="file" id="f" onchange="txt.value=this.value" name="f" style="position:absolute;filter:alpha(opacity=0);" size="1" hidefocus><BR>
<INPUT TYPE="submit">
</form>
</BODY>
可以看下opacity=0改为稍大些的效果。
OK了，现在你就可以控制它们的样式、位置了。。。
分享到：
相关推荐
要自定义`input file`样式，通常有两种方法： 1. **隐藏原生控件，使用CSS和JavaScript模拟**：将`input[type="file"]`设置为透明或者绝对定位使其脱离文档流，然后创建一个更美观的触发器（如一个`<button>`或`...
总之，自定义file标签是通过结合HTML、CSS和JavaScript来提升用户体验的一个重要技术。它可以提供更具吸引力的界面，同时保持与网站其他元素的视觉一致性。在这个过程中，我们需要注意兼容性问题，确保在不同的...
"input file选择文件之后自动上传（样式自定义美化）"这个主题聚焦于一个常见但有时被忽视的用户体验改进点：如何在用户选择文件后立即启动上传，并且在上传过程中保持界面的美观与友好。下面将详细介绍这一过程涉及...
本文详细介绍了如何只修改`<input type="file">`组件中的“浏览”按钮样式的方法。通过隐藏原始文件输入框、创建自定义按钮、绑定点击事件以及进行样式调整等步骤，我们可以轻松地实现这一目标。这种方法不仅能够...
Bootstrap-File-Input插件则提供了丰富的自定义选项，如多文件选择、预览、进度条、拖放上传、文件类型限制等，使得文件上传功能变得更加友好和强大。 插件的主要特性包括： 1. **预览功能**：用户可以选择图片、...
在HTML结构中，我们通常会隐藏原生的file input，然后在上面覆盖一个自定义样式的按钮和一个用于显示文件路径的文本框，以便用户点击这个“按钮”来打开文件选择对话框。这里的“假”上传按钮（.file-uploader-wrap-...
总的来说，自定义`<input type="file">`元素的样式涉及到HTML结构的调整、CSS定位和透明度控制，以及对不同浏览器兼容性的考虑。通过这些技术，我们可以创建出符合设计需求且具有良好用户体验的文件上传按钮。
通过以上方法，我们可以对`<input type="file">`上传控件进行样式美化，创建出符合网页设计风格的上传界面。但请注意，虽然我们可以改变控件的外观，但其核心功能和交互仍受浏览器安全策略的限制。在设计时，要兼顾...
这种方法利用绝对定位将一个透明的 `input[type="file"]` 元素覆盖在背景图片之上。通过设置 `opacity` 为0，使得上传按钮变得不可见，而用户仍然可以通过背景图片触发文件选择对话框。这种方式在大部分浏览器中都能...
因此，对 `input type=file` 进行自定义样式处理是非常有必要的。 #### 一、基本语法介绍 在HTML中，`<input>` 元素通过 `type` 属性来指定不同的输入类型，其中 `type="file"` 表示文件输入类型。基本用法如下： ...
本主题聚焦于利用jQuery来改进文件上传功能，尤其是针对`<input type="file">`元素的样式和交互。在传统的HTML文件上传输入框中，用户通常会看到一个简单的文本按钮，点击后弹出文件选择对话框。然而，这样的设计...
4. **自定义上传按钮和清除按钮**：可以自定义按钮的文本、图标和样式，与网站设计无缝融合。 5. **文件大小限制**：可以设置上传文件的最大大小，防止过大文件导致的问题。 6. **多语言支持**：内置多种语言，满足...
script src =" dist/custom-html-file-input.min.js " > </ script > < script > jQuery ( function ( $ ) { $ . customHtmlFileInput ( ) ; // "awesome" } ) ; </ script > 文档 （即将...
为了自定义样式，我们可以先隐藏原始的`<input>`元素，使用CSS的`opacity`或`display`属性将其设置为不可见。这样，我们就可以在它的上方添加自定义的按钮样式。 2. 创建自定义按钮： 使用`<label>`元素与`<input...
我们将讨论如何自定义图片、样式以及按钮上的文字，以提升用户体验。 首先，我们需要了解HTML中的`<input type="file">`元素，这是创建上传按钮的基础。但默认情况下，这个按钮的样式通常比较单调，不符合现代网页...
由于浏览器的安全限制，我们不能直接修改input[type="file"]的文本内容，但可以通过覆盖默认样式，使用自定义的背景图片和透明的文字来实现视觉上的替换。 1. **隐藏默认按钮**： ```css input[type="file"] { ...
要美化`file`控件，一种常见方法是使用CSS隐藏原生的`input type="file"`，并使用其他HTML元素（如`<input type="text">`和`<input type="button">`）来模拟其外观。这种方法的核心在于将`file`控件的位置调整到模拟...
1. **隐藏原始文件输入框**：由于浏览器对`<input type="file">`的样式支持有限，我们通常会用一个自定义的按钮覆盖它，然后使用JavaScript来触发文件选择。例如： ```css input[type="file"] { display: none; ...
本教程将详细介绍如何使用CSS对`input[type=file]`进行样式美化，使文件上传按钮更加符合网站的整体风格。 首先，我们来看一个简单的例子。在这个例子中，我们创建了两个不同的样式来展示如何自定义文件上传按钮： ...
这个CSS样式使得`<input type="file">`看起来像一个自定义的按钮，而实际的文件选择控件被隐藏，只保留文字提示。通过这种方式，我们可以改变`<input type="file">`元素的外观，使其更好地融入网页的设计风格。 ...