在开发中，文件上传必不可少，<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

总结：

1.用一个不透明度为0的 <input type="file"  />盖在要用户可见的标签（或图片等）上，让用户点击。

2.用 width  height   line-height  font-size 来控制<input type="file" />右侧浏览按钮的大小。

3.用 left  top （right 、 bottum）来控制<input type="file" />右侧浏览按钮的位置，可以设置为负值。

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

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

[置顶] js 实现 <input type="file" /> 文件上传的更多相关文章

  1. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  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 onchange上传文件的过程中，遇到同一个文件二次上传无效的问题。

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

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

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

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

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

随机推荐

  1. 【干货】查看windows文件系统中的数据—利用簇号查看文件与恢复文件

    前面我们使用这个软件发现了很多删除掉的数据,今天来看看簇.FAT文件系统中,存在一个簇的链接,我知道了簇1在哪里就可以顺藤摸瓜恢复所有的信息. 这里使用FAT 12为例子,FAT其他万变不离其宗,甚至 ...

  2. MySQL5.7 GTID在线开启与关闭【转】

    当前场景   当前某些业务还有未开启GTID服务组,升级5.7后,如何检测是否符合开启GTID条件,如何在线修改切换使用GTID:已经升级5.7后,已经开启GTID,如何快速回滚后退: 线上gtid如 ...

  3. python psutil监控系统资源【转】

    通过 运用 Python 第三方 系统 基础 模块, 可以 轻松 获取 服务 关键 运营 指标 数据,包括 Linux 基本 性能. 块 设备. 网卡 接口. 系统 信息. 网络 地址 库 等 信息. ...

  4. 七、vue语法补充二（动态组件 & 异步组件、访问元素 & 组件、混入）

    1..sync 修饰符 2.3.0+ 新增 vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定.类似于v-model的效果 例子: this.$ ...

  5. Kali Linux没有声音的解决方法

    Kali Linux系统默认状态下,root用户是无法使用声卡的,也就没有声音.启用的方法如下:         (1)在终端执行命令:systemctl --user enable pulseaud ...

  6. bzoj 1190

    思路:分层dp,因为给的w都是a*(2 ^ b)的形式, 我们将这些物品按b分层, 我们设 dp[ i ][ j ]表示在 第 i 层 容量为(j << i)的最大值, 然后通过层与层之间 ...

  7. docker commit 制作镜像

    docker commit -m="commit jdk" --author="gutianlangyu" ae56f6cad215 gutianlangyu/ ...

  8. HBase0.99.2集群的搭建步骤（在hadoop2.6.4集群和zookeeper3.4.5集群上）

    HBase介绍(NoSql,不是关系型数据库) HBase是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBASE技术可在廉价PC Server上搭建起大规模结构化存储集群. HBase ...

  9. gi常用命令

    git提交代码流程 git status 检查当前代码和主支代码不同的状态 git diff 可指定文件查看这个文件修改的内容 git add . 把自己所有修改的代码提交 git commit 提交 ...

  10. 001.RAID简介

    一 RAID介绍 独立磁盘冗余数组(RAID, Redundant Array of Independent Disks),旧称廉价磁盘冗余数组(RAID,Redundant Array of Ine ...