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

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

代码如下:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="js/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>

<style type="text/css">

._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;

}

</style>

<title>js 实现 input file 文件上传 /></title>

</head>

<body>

<form id="form1" runat="server" method="post" enctype="multipart/form-data">

<div>

<div class="_box">选择图片</div>

</div>

<div class="none">

<input type="file" name="_f" id="_f" />

</div>

</form>

</body>

</html>

<script type="text/javascript">

jQuery(function () {

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

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

});

});

</script>

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

代码如下:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="js/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>

<style type="text/css">

._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;

}

</style>

<title>js 实现 input file 文件上传 /></title>

</head>

<body>

<form id="form1" runat="server" method="post" enctype="multipart/form-data">

<div>

<div class="_box">选择图片</div>

</div>

<div class="none">

<input type="file" name="_f" id="_f" />

</div>

</form>

</body>

</html>

<script type="text/javascript">

jQuery(function () {

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

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

});

});

</script>

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

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

._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;

}

</style>

<title>js 实现 input file 文件上传 /></title>

</head>

<body>

<form id="form1" runat="server" method="post" enctype="multipart/form-data">

<div>

<div class="_box">

<input type="file" name="_f" id="_f" />

选择图片

</div>

</div>

</form>

</body>

</html>

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

js 实现 input type="file" 文件上传示例代码的更多相关文章

  1. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  2. javascript input type=file 文件上传

    在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...

  3. input type="file"文件上传到后台读取

    html页面(表单采用bootStrap) js部分: //更换头像时把上传的图片post方式到控制器 <script type="text/javascript"> ...

  4. input type='file'文件上传自定义样式

    使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...

  5. <input type="file">文件上传

    <input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作 . 常用i ...

  6. input type="file"文件上传时得到文件的本地路劲

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name=& ...

  7. input type='file'限制上传文件类型

    前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so  easy啊,没什么嘛 ...

  8. input type file onchange上传文件的过程中，遇到同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

  9. input[type='file']获取上传文件路径案例

    最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...

随机推荐

  1. NYOJ--353--bfs+优先队列--3D dungeon

    /* Name: NYOJ--3533D dungeon Author: shen_渊 Date: 15/04/17 15:10 Description: bfs()+优先队列,队列也能做,需要开一个 ...

  2. SecureCRT 常用命令大全

    常用命令:一.ls 只列出文件名 (相当于dir,dir也可以使用) -A:列出所有文件,包含隐藏文件. -l:列表形式,包含文件的绝大部分属性. -R:递归显示. --help:此命令的帮助. 二. ...

  3. 特殊的ip地址

    特殊IP地址 一.0.0.0.0 严格说来,0.0.0.0已经不是一个真正意义上的IP地址了.它表示的是这样一个集合:所有不清楚的主机和目的网络.这里的“不清楚”是指在本机的路由表里没有特定条目指明如 ...

  4. macOS Sierra 10.12.6 安装u盘制作

    一.准备工作: 准备一个 8GB 或以上容量的 U 盘,确保里面的数据已经妥善备份好(该过程会抹掉 U 盘全部数据) 从这里下载苹果官方 OS X Yosemite 正式版的安装程序 (可选 AppS ...

  5. C++中加const与不加const的区别

    “常量”与“只读变量”的区别. 常量肯定是只读的,例如5, "abc",等,肯定是只读的,因为常量是被编译器放在内存中的只读区域,当然也就不能够去修改它. “只读变量”则是在内存中 ...

  6. js实现轮播图动画

    在网页浏览中,可以看到轮播图是无处不在的,这是一个前端工程最基本的技巧.首先看看几个网页的呈现的效果. QQ音乐: 网易云音乐: 天猫: 接下来将从简到难总结几种实现轮播图的方法. 1.样式一:鼠标滑 ...

  7. 设计模式之桥接模式（Bridge模式）

    我想大家小时候都有用蜡笔画画的经历吧.红红绿绿的蜡笔一大盒,根据想象描绘出格式图样.而毛笔下的国画更是工笔写意,各展风采.而今天我们的故事从蜡笔与毛笔说起. 设想要绘制一幅图画,蓝天.白云.绿树.小鸟 ...

  8. # webpack 3 & React 的简单配置 。

    今天真是难过的一天

  9. JQuery中的回调对象

    JQuery中的回调对象 回调对象(Callbacks object)模块是JQuery中的一个很基础的模块,很多其他的模块(比如Deferred.Ajax等)都依赖于Callbacks模块的实现.本 ...

  10. 【转载】Linux的inode的理解

    本文转在是博主为了以后温习.请访问原文链接 http://www.cnblogs.com/itech/archive/2012/05/15/2502284.html 一.inode是什么? 理解ino ...