html怎么实现input file,js 实现 input type="file" 文件上传示例代码

在开发中，文件上传必不可少， 是常用的上传标签，但是它长得又丑、浏览的字样不能换，我们一般会用让，隐藏，点其他的标签(图片等)来时实现选择文件上传功能。

看代码：

._box

{

width: 119px;

height: 37px;

background-color: #53AD3F;

background-image: url(images/bg.png);

background-repeat: no-repeat;

background-position: 0 0;

background-attachment: scroll;

line-height: 37px;

text-align: center;

color: white;

cursor: pointer;

}

.none

{

width: 0px;

height: 0px;

display: none;

}

js 实现 input file 文件上传 />

选择图片

jQuery(function () {

$("._box").click(function () {

$("#_f").click();

});

});

但是在火狐和一些高版本的浏览器中后台可以获取到要上传的文件，一些低版本的浏览器压根就获取不到Request.Files

查阅资料，有说改成这样的：

._box

{

width: 119px;

height: 37px;

background-color: #53AD3F;

background-image: url(images/bg.png);

background-repeat: no-repeat;

background-position: 0 0;

background-attachment: scroll;

line-height: 37px;

text-align: center;

color: white;

cursor: pointer;

}

.none

{

width: 0px;

height: 0px;

display: none;

}

js 实现 input file 文件上传 />

选择图片

jQuery(function () {

$("._box").click(function () {

return $("#_f").click();

});

});

加了一个return关键字，兼容性提高了不少，但是有的浏览器还是不好用。

我们发现只有手动点击后台就一定能获取到要上传的文件

于是我们可以透明

修改代码如下：

._box

{

position: relative;

width: 119px;

height: 37px;

background-color: #53AD3F;

background-image: url(images/bg.png);

background-repeat: no-repeat;

background-position: 0 0;

background-attachment: scroll;

line-height: 37px;

text-align: center;

color: white;

cursor: pointer;

overflow: hidden;

z-index: 1;

}

._box input

{

position: absolute;

width: 119px;

height: 40px;

line-height: 40px;

font-size: 23px;

opacity: 0;

filter: "alpha(opacity=0)";

filter: alpha(opacity=0);

-moz-opacity: 0;

left: -5px;

top: -2px;

cursor: pointer;

z-index: 2;

}

js 实现 input file 文件上传 />

选择图片

我们点击选择图片实际点击了不透明度为0的 ，单用户切看不到 后台亦可以获取到要上传的文件了。

ok

总结：

用一个不透明度为0的 盖在要用户可见的标签(或图片等)上，让用户点击。

用 width height line-height font-size 来控制右侧浏览按钮的大小。

用 left top (right 、 bottum)来控制右侧浏览按钮的位置，可以设置为负值。

用z-index来设置它们的层覆盖关系。

form 必须有enctype="multipart/form-data"标记才能上传文件