以input=file方式,获取文件时,在IE下8无法通过某个按钮click事件间接触发input=file的change事件

最近在项目中遇到了许多上传问题,公司内部的组件,通过form上传,需要使用input=file触发选择文件,

因为input=file在各个浏览器中显示的样式是不同的,谷歌,火狐,IE都有所不同,而且不太美观,所以为了解决

这一个问题,一开始采用了隐藏input=file 然后通过一个显示的button间接触发input=file的click事件如下

<input type="file" id="upload" style="display:none">

<input type="button" value="上传" onlick="document.getElementById(‘upload‘).click()"/>

经过测试在IE9+,谷歌,火狐下均能够正常使用,能够正常上传,但是在IE8下却出现了问题,不管如何选择

都无法触发change事件,经过查询,原来基于安全限制,IE8下将间接触发的input=file的值情况了,这样就导致了

始终无法触发change事件的问题。然后经过一番捣鼓+百度终于弄出了一个兼容的东西:

<div ><input type=‘file‘><a>上传</a></div>

首先将input=file方在一个div中,DIV设置position,并且overflow=hidden,并且让input=file大小和宽度足以覆盖

整个DIV,同时让其的透明度opacity为0,这样就能显示被覆盖的a标记上传,但实际点击的却是覆盖在最上面的input=file标签

这样就解决了兼容问题。

上传的时候还有一个小兼容问题,好像在IE版本下如IE8,INPUT=FILE是只读的,为了清空input=file,每次上传完成之后

必须手动清空,即先克隆该节点,然后再替代原来的节点。。

不足:但是这样做仍然有一个问题,在谷歌下鼠标移入input=file标签时,鼠标手型不起作用,这就导致了用户体验不好,暂时还没有想到解决办法。

组件是基于form上传,没能实现进度条,为了兼容不能使用HTML5,因此尝试自己捣鼓flash上传,结果惨败。。。实力不济。多多学习。

时间: 2024-10-12 17:09:37

以input=file方式,获取文件时,在IE下8无法通过某个按钮click事件间接触发input=file的change事件的相关文章

JavaSE8基础 File lastModified 获取文件夹的修改日期

os :windows7 x64    jdk:jdk-8u131-windows-x64    ide:Eclipse Oxygen Release (4.7.0) information: 通过这张截图可以看到 测试文件夹 的修改日期. code: package jizuiku0; import java.io.File; import java.text.SimpleDateFormat; import java.util.Date; /* * @version V17.09 */ pu

关于svn获取获取文件时 Unable to connect to a repository at URL&quot;https://...&quot;执行上下文错误:参数错误

错误提示: 下面的六种解决方案都未能解决: 1.不提示输入用户名和密码,不管重装多少次都一样. 2.TortoiseSVN的setting->Saved Data->Authentication data 的clear和clear all是灰色的,无法清除 3.用网上说的删除C:\Users\lenovo\AppData\Roaming\Subversion下的所有文件也不行,还是上面图片的错误. 4.用网页登录svn是可以的,也可以输入用户名,密码把我原来存到SVN上的文件下载下来.(网友的

Android 扫描音乐文件、两种方式获取文件最新修改时间

package com.example.demo_mediascanner; import java.io.File; import java.util.Calendar; import java.util.Date; import android.net.Uri; import android.os.Bundle; import android.os.Environment; import android.provider.MediaStore; import android.app.Acti

C# Directory.GetFiles()获取文件时如果是根目录时有隐藏文件则报错的处理

如果Directory.GetFiles("d:\"),则由于回收站是隐藏文件而报错,怎么躲避这种错误呢, 我要了一种办法,只要遇到隐藏文件夹就跳过的方法: foreach (var item in Directory.GetDirectories("d:")) { if ((new FileInfo(item).Attributes & FileAttributes.Hidden) != FileAttributes.Hidden) //必须进行与运算,因

C#多种方式获取文件路径

string str5=Application.StartupPath;//获取启动了应用程序的可执行文件的路径,不包括可执行文件的名称. string str1 =Process.GetCurrentProcess().MainModule.FileName;//可获得当前执行的exe的文件名. string str2=Environment.CurrentDirectory;//获取和设置当前目录(即该进程从中启动的目录)的完全限定路径. //备注 按照定义,如果该进程在本地或网络驱动器的根

Java获取文件后缀的两种方式

原文地址: https://www.4spaces.org/get-file-extension-using-java/; 在对文件进行操作的时候,我们经常需要用到文件的后缀.但是Java API中并没有提供获取文件后缀的方法.下面的工具方法可以帮助我们实现这个目的. 方法1 代码示例: package org.4spaces; import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage

借助JCharDet获取文件字符集

前段时间,在学习lucene的时候,遇到了读取txt文档遇到编码错误的问题.学了几个解决方案,大部分是将文件转十六进制(可以使用UE的Ctrl+H来查看),读取开头的四个标志位来判断.可是总有些文本文件无法识别(我遇到的是部分使用UTF-8编码的文件),后来发现了JCharDet.JCharDet是mozilla(就是firefox那家)的编码识别算法的Java实现,算了,这里是官网,自己看吧. 上代码: package com.zhyea.util; import java.io.Buffer

&lt;input type=&quot;file&quot;&gt; change事件异常处理办法

问题:最近发现一个奇怪的bug, 那就是在上传图片需要采用input type=file来进行文件选择.由于为了适应美工的UI图,所以是把选择文件的input框隐藏了.然后通过另外一个按钮的点击事件来触发input的选择事件.代码如下: <div style="width:120px;height:120px"> <img src="/image/uploadfile.png" style="width:100%;height:100%&

html,图片上传预览,input file获取文件等相关操作

input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 var path=obj.value;//获取文件当前路径 var size=obj.files[0].size;//获取文件大小 var prefix=path.substring( path.lastIndexOf('\\')+1 );//获取文件名的前缀名(文件格式) var suffix=path.