文档章节

IE input type=file 隐藏时不能上传文件

爱吃苹果的搬运工
 爱吃苹果的搬运工
发布于 2014/06/26 13:24
字数 935
阅读 44
收藏 0
点赞 0
评论 0

又是IE的一个问题,近来是跟IE浏览器磕上了,这个问题发现不少人也遇到过,实在蛋疼。但今天这个不能算是一个bug,因为IE可能是从安全角度上考虑结果导致的。一步步来解读。

普通上传例子

首先普通的文件上传呢,很简单,前端代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
< html >
     < head >
         < meta charset = "utf-8" />
         < title >file标签隐藏</ title >
 
     </ head >
     < body >
         < form action = "http://192.168.1.99/upload/upload.php" method = "post" enctype = "multipart/form-data" >
             < input onchange = "document.forms[0].submit();" type = "file" name = "file" />
         </ form >
     </ body >
</ html >

upload.php代码:

1
2
3
echo '<pre>' ;
print_r( $_FILES [ "file" ]);
echo '</pre>' ;

其实就是打印获取到的文件信息。我们测试一下,选择文件后,提交到PHP页面结果如下:

Array
(
    [name] => 7.jpg
    [type] => image/jpeg
    [tmp_name] => /tmp/php0VkjPG
    [error] => 0
    [size] => 36297
)

能正确获取文件信息,只需要cp下就能保存。

用别的按钮替代file标签

但是默file标签很难看,而且每个浏览器下都有很大差距。因此我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它,比如我们创建一个a标签来替代它,隐藏file标签,单击a标签时触发file标签click弹出选择文件窗口。最终页面代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
< html >
     < head >
         < meta charset = "utf-8" />
         < title >file标签隐藏</ title >
 
     </ head >
     < body >
         < form action = "http://192.168.1.99/upload/upload.php" method = "post" enctype = "multipart/form-data" style = "display:none;" >
             < input onchange = "document.forms[0].submit();" type = "file" name = "file"  />
         </ form >
 
         < a onclick = "document.forms[0].file.click();" href = "javascript:void(0);" >上传文件</ a >
     </ body >
</ html >

页面上就只看见a标签

点击“上传文件”弹开选择文件的窗口

选择文件后,正确传送文件信息到服务器

这样就完成文件上传了,这个操作在Chrome,FireFox下都正常,IE下有问题。

IE不能上传文件

IE下也能正常弹开选择文件的窗口

但选择文件后,却不能上传,同时还报一个“拒绝访问”错误,如截图中红圈部分

解决IE下不能上传文件的问题

其实这是IE安全限制问题,没有点击file的浏览按钮选择文件都不让上传,既然IE非得要亲自点击,我们可以变通一下,让自定义按钮存在又能真正点击到file标签。解决方案是让file标签盖在a标签上,但file是透明的,这样用户看到的是a标签的外观,实际点击是file标签。如图:

最终页面代码如下:

1
2
3
4
5
< a style = "position:relative;display:block;width:100px;height:30px;background:#EEE;border:1px solid #999;text-align:center;"  href = "javascript:void(0);" >上传文件
     < form action = "http://192.168.1.99/upload/upload.php" method = "post" enctype = "multipart/form-data" >
         < input style = "position:absolute;left:0;top:0;width:100%;height:100%;z-index:999;opacity:0;" onchange = "document.forms[0].submit();" type = "file" name = "file"  />
     </ form >
</ a >

页面:

需要注意几个问题
1、取消a标签onclick事件,因为实际上已经不需要a标签的onclick触发file的click了,而是直接就点击到file;
2、file标签不需要再设置display:none隐藏,而是通过opacity:0让它完全透明,实际它是浮在a标签之上
3、file标签设置position:absolute后要给left:0、top:0,否则file标签不会吻合覆盖a标签导致点击按钮的时候点不到file标签

我们再来测试一下:

点击按钮:

选择文件:

上传成功!


本文转载自:http://www.qttc.net/201305334.html

共有 人打赏支持
爱吃苹果的搬运工
粉丝 3
博文 14
码字总数 983
作品 0
朝阳
程序员
点击图片上传文件

一、选择文件 1、隐藏input(大部分手机浏览器,微信中都不可用) 通过js触发选择文件。js获取选择的文件并上传 实现: 上传

陈安一
2015/08/31
0
0
隐藏file控件,用button实现文件上传

<input type="file">控件不是很美观,很多时候可能更希望用button去代替它实现文件上传 一种方法是用button覆盖file原本的浏览按钮,不足是得精确控制位置和大小,文本框还在 另一种是设置成...

Seast
2013/03/15
0
0
php实现文件上传功能的详细代码实例

php实现文件上传功能的详细代码实例 上传文件我们少不了moveuploadedfile函数本函数检查并确保由 file 指定的文件是合法的上传文件(即通过 php教程 的 http post 上传机制所上传的)。如果文...

菊花为谁开
2011/05/04
0
0
JS简单实现文件上传实例代码(无需插件)

<span class="up-btn" id="selectFile">请选择文件</span><input type="file" name="fileupload" style="FILTER: alpha(opacity=0); moz-opacity: 0; opacity: 0;" /> // 点击#selectFile触发......

furw
2016/02/03
104
0
Uploadify+MultipartFile实现文件上传

一.form表单(截选) <table id="myTable" border="0" cellspacing="0" cellpadding="0"> <tr id='myTr'> <td class="label">合同附件:</td> <td style="padding:0" width="23%"><input class......

Romanceling
2016/08/23
302
0
jQuery插件之ajaxFileUpload上传文件

ajaxFileUpload.js 很多同名的,因为做出来一个很容易。 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://files.cnblogs.com/files/kissdodog/ajaxfileup...

hello菜bird
2016/12/01
86
0
简便无刷新文件上传系统

之前写过一个仿163网盘无刷新多文件上传系统,已经对无刷新上传文件的原理做了详细的分析。 而这次的系统主要是针对单个file控件的,便携版,使用更简单,还有更深入的分析。 ps:flash实现的...

青夜之衫
2017/12/05
0
0
解决:PHP+Apache上传文件大小限制的问题

在用PHP进行文件上传的操作中,需要知道怎么控制上传文件大小的设置,而文件可传大小是受到多种因素制约的,现总结如下: 1、php.ini:uploadmaxfilesize 所上传的文件的最大大小。默认值2M。...

Junn
2013/07/29
0
0
php实现图片上传并进行替换操作

这篇文章主要为大家详细介绍了php实现图片上传并进行替换操作,讲解的很详细,通俗易懂,感兴趣的小伙伴们可以参考一下 首先建立两个文件: change.html 和 change.php change.html 文件的表...

zyt_1978
2016/03/16
15
0
解决Apache2+PHP上传文件大小限制的问题

解决Apache2+PHP上传文件大小限制的问题 2009-07-28 文章来源:互联网 浏览次数:8048 分享文章 评论:腾讯微博 新浪微博 在用PHP进行文件上传的操作中,需要知道怎么控制上传文件大小的设置...

cosmos180
2012/07/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

istio源码分析之pilot-discovery模块分析

本文分析的istio代码版本为0.8.0,commit为0cd8d67,commit时间为2018年6月18日。 本文为Service Mesh深度学习系列之一: Service Mesh深度学习系列part1—istio源码分析之pilot-agent模块分...

xiaomin0322
11分钟前
0
0
数据库基本操作:增删改查及联表操作

所用软件:SQL Server Management Studio 首先第一步,建立一个表。在这里命名为T1。并在里面填入几条数据。如图: T1 一.查询 查询所有:select * from T1; 按条件查询:select * from T1 ...

小_橙_子
15分钟前
0
0
Crontab作业时间设置

今天,遇到这么一个题目,周一到周五的9:00-16:59之间,每隔两分钟将某个命令运行一次。给的答案是: */2 9-16 * * 1-5 /usr/sbin/somecommand dosomething 乍一看,这个答案不对,应...

大别阿郎
20分钟前
0
0
ES17-JAVA API文档管理

1.保存文档 可以通过json工具把java对象转换成json字符串进行保存,也可以通过内置的帮助类直接构建json格式 /** * 获取客户端 * * @return */public static TransportClie...

贾峰uk
20分钟前
0
0
Python代码规范和命名规范

前言 Python 学习之旅,先来看看 Python 的代码规范,让自己先有个意识,而且在往后的学习中慢慢养成习惯 一、简明概述 1、编码 如无特殊情况, 文件一律使用 UTF-8 编码 如无特殊情况, 文件头...

blackfoxya
23分钟前
0
0
联动滑动之一:NestScrollChild和NestedScrollingParent

NestScrollChild和NestedScrollingParent 吐槽一下开源中国竟然标题字数有限制 由于项目中使用了CoordinateLayout来解决联动以及实现炫酷的UI效果,那么必须就要研究一波源码了,毕竟知其然知...

JerryLin123
41分钟前
1
0
cloudera spark2.2 读写hbase

cloudera spark2.2 读写hbase 例子 host = 'bigdata-03,bigdata-05,bigdata-04'conf = { "hbase.zookeeper.quorum": host, "hbase.mapreduce.inputtable": "student1"}k......

osenlin
45分钟前
0
0
数据库规范化

转载自 一个小时学会MySQL数据库 地址:http://www.cnblogs.com/best/p/6517755.html 截取其中 1.4 部分 用于自己学习使用 感谢作者:张果 1.4、数据库规范化 经过一系列的步骤,我们现在终于...

十万猛虎下画山
46分钟前
0
0
ios逆向之工具篇

Reveal:查看任意app的UI结构 注:1.不越狱的手机,可以用Reveal来查看自己app的UI结构,不能查看其它app的结构。 2.越狱手机上可以查看任意app的UI结构。 IDA:反编译工具 从App Store下载的...

HeroHY
46分钟前
0
0
EOS区块链平台智能合约示例HelloWorld

我们将介绍一个使用EOS智能合约构建hello World的例子。 一般环境设置通过上一篇文章已经说明,这方面的问题大家可以看本博客上一篇文章,本文引用了官方EOS在Git上的示例。 运行nodeos 要通...

笔阁
49分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部