IE input file隐藏不能上传文件解决方法

当大神们都在探讨更深层次的问题时,我还在这里转载发些肤浅的问题解决方案。罢了,为了和我一样笨的后来人。

问题:

上传文件时,用<input type="file" />标签,但是默认的file标签很难看,而且每个浏览器下都有很大差距。

1.一般解决办法:

我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它,比如我们创建一个a标签来替代它,隐藏file标签,单击a标签时触发file标签click弹出选择文件窗口,选择文件之后,触发file的change事件提交。

存在问题:

由于IE浏览器安全限制问题,没有点击file的浏览按钮选择文件都不让上传。

2.终极解决办法:

既然IE非得要亲自点击,我们可以变通一下,让自定义按钮存在又能真正点击到file标签。

解决方案是让file标签盖在a标签上,但file是透明的,这样用户看到的是a标签的外观,实际点击是file标签。

代码如下

<a style="position:relative;" href="javascript:void(0);">     上传文件
        <input style="position:absolute;left:0;top:0;z-index:999;opacity:0;"type="file" name="file"  />
</a>

注意:

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

参考原文:http://www.qttc.net/201305334.html(感谢原文作者的分享)

 

IE input file隐藏不能上传文件解决方法

时间: 2024-11-05 11:36:28

IE input file隐藏不能上传文件解决方法的相关文章

html input file标签的上传文件 注意点

文件上传框  代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxlength=“100”> 属性解释: 属性解释: type=“file”定义文件上传框: name属性定义文件上传框的名称,要保证数据的准确采 集,必须定义一个独一无二的名称: size属性定义文件上传框的宽度,单位是单个字符宽度: maxlength属性定义最多输入的字符数. 注意: 要使得文件上载能

mvc中file无刷新上传文件

前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下. 上传封装类: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; using System.Web; n

input file 美化及上传本地预览

效果: /*input file 美化及上传本地预览,兼容IE6-8,FIrefox, Chrome(需在服务端,本地无效)*/<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>input file 美化</title>    &

Loadrunner上传文件解决办法(大文件)

Loadrunner上传文件解决办法(大文件) 最近再做一个跟海量存储相关的项目测试,需要通过LR模拟用户大量上传和下载文件,请求是Rest或Soap,同时还要模拟多种大小尺寸不一的文件 通常情况下,都是使用简单的post协议即可: 方法一: web_submit_data("importStudent.do", "Action=https://testserver/console/importStudent.do", "Method=POST"

springMVC 获取本地项目路径 以及上传文件的方法整理

String path=request.getSession().getServletContext().getRealPath("upload/img/product"); //二进制上传 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; //获取文件 CommonsMultipartFile fpic=(CommonsMultipartFile) multipa

asp.net中fileupload上传文件的方法

FileUpload 控件显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles\test.txt)来指定要上载的文件.用户也可以通过单击“浏览”按钮,然后在“选择文件”对话框中定位文件来选择文件. 用户选择要上载的文件后,FileUpload 控件不会自动将该文件保存到服务器.您必须显式提供一个控件或机制,使用户能提交指定的文件.例如,可以提供一个按钮,用户单击它即可上载文件

朋友封装的一个ASP.NET上传文件的方法

自我感觉封装得还不错!!! 代码如下: C#代码   #region 上传文件的方法 /// <summary> /// 上传文件方法 /// </summary> /// <param name="myFileUpload">上传控件ID</param> /// <param name="allowExtensions">允许上传的扩展文件名类型,如:string[] allowExtensions = 

朋友封装的一个ASP.NET上传文件的方法(转)

#region 上传文件的方法 /// <summary> /// 上传文件方法 /// </summary> /// <param name="myFileUpload">上传控件ID</param> /// <param name="allowExtensions">允许上传的扩展文件名类型,如:string[] allowExtensions = { ".doc", ".

几个关于上传文件的方法和属性

在进行进一步的代码解释之前,需要先讲几个关于上传文件的方法和属性: myFile.read():从文件中读取整个上传的数据,这个方法只适合小文件: myFile.chunks():按块返回文件,通过在for循环中进行迭代,可以将大文件按块写入到服务器中: myFile.multiple_chunks():这个方法根据myFile的大小,返回True或者False,当myFile文件大于2.5M(默认为2.5M,可以调整)时,该方法返回True,否则返回False,因此可以根据该方法来选择选用re