js实现inputtype="file"文件上传示例代码_javascript技巧



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













jQuery(function () {
$("._box").click(function () {
$("#_f").click();
});
});


但是在火狐和一些高版本的浏览器中后台可以获取到要上传的文件，一些低版本的浏览器压根就获取不到Request.Files
查阅资料，有说改成这样的：
代码如下:













jQuery(function () {
$("._box").click(function () {
return $("#_f").click();
});
});


加了一个return关键字，兼容性提高了不少，但是有的浏览器还是不好用。
我们发现只有手动点击后台就一定能获取到要上传的文件
于是我们可以透明
修改代码如下：
代码如下:











我们点击选择图片实际点击了不透明度为0的 ，单用户切看不到 后台亦可以获取到要上传的文件了。
ok
总结：
用一个不透明度为0的 盖在要用户可见的标签（或图片等）上，让用户点击。
用 width height line-height font-size 来控制右侧浏览按钮的大小。
用 left top （right 、 bottum）来控制右侧浏览按钮的位置，可以设置为负值。
用z-index来设置它们的层覆盖关系。
form 必须有enctype="multipart/form-data"标记才能上传文件