uploadPreview 上传图片前预览 IE9 索引无效的问题
最近公司的项目用到比较多的上传图片的操作,所以用到了基于jquery的上传前预览的插件 uploadPreview ,后来测试的时候发现在IE9下报索引无效的问题。
异常的产生方式 放一个file控件,然后隐藏,用按钮的事件替代file的change事件,代码如下
<div class="portrait" id="portrait">
<img src="../../content/images/face.png" id="preImage" />
</div>
<input type="file" id="file" name="file" style="display:none">
<button class="stystem-xztp" type="button"></button>
js:
$('.stystem-xztp').on('click', function () {
$('#file').click();
}); new uploadPreview({ UpBtn: "file", DivShow: "portrait", ImgShow: "preImage", callback: $.noop });
产生原因,页面上隐藏后, uploadPreview插件内部找不到元素,所以报索引无效,我的解决方式是将file改为显示,即去掉隐藏属性,只是不让它在可视区域展示 如:
<input type="file" id="file" name="file" style="position: absolute;top:-2000px;" />
uploadPreview 上传图片前预览 IE9 索引无效的问题的更多相关文章
- uploadPreview上传图片前预览图片
uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!DOCTYPE html PUBLIC "- ...
- js上传图片前预览方法(支持预览多个图片)
运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...
- javscript上传图片前预览的方法setPreViewImage()
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
- FileReader与URL.createObjectURL实现图片、视频上传前预览
之前做图片.视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览.实际上这只是文件“上传后再预览”,这既浪 ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
随机推荐
- c++ new 与malloc有什么区别
前言 几个星期前去面试C++研发的实习岗位,面试官问了个问题: new与malloc有什么区别? 这是个老生常谈的问题.当时我回答new从自由存储区上分配内存,malloc从堆上分配内存:new/de ...
- Rhythmk 学习 Hibernate 03 - Hibernate 之 延时加载 以及 ID 生成策略
Hibernate 加载数据 有get,跟Load 1.懒加载: 使用session.load(type,id)获取对象,并不读取数据库,只有在使用返回对象值才正真去查询数据库. @Test publ ...
- Firemonkey Android 虚拟机
AVD,Android Virtual Device start menu>Android AVD Manager>create>start. [DCC Error] E2597 D ...
- Redis 主从分离
首先配置redis.conf文件如下6个位置 cp 多个redis.conf文件 开启daemonize yes PID文件名字 端口 log文件名字 dump.rdb名字 配置: 主机不动,配置从机 ...
- 【330】word - VBA 相关实现
参考:Object model (Word VBA reference) 序号 类名称 功能说明 语法 & 举例 01 Selection ====<<<< ...
- JQuery:选择器、动画、AJAX请求
选择器 1.事件编程与动画效果 一个选择器可以在概念上理解为指针.借助与JQuery库中的选择器$,线程可以获取到界面元素的引用,从而可以调用 ready().click()方法把用户事件和动作方法关 ...
- info信息总结
查询info信息 [[NSBundle mainBundle] infoDictionary] 以下是对应的输出 { BuildMachineOSBuild = 15C50; CFBundleDeve ...
- jquery text() html() val()
test text() 返回 test html() 返回 test val() 没值, val() 适用于有value属性的元素, 例如: input
- C#缓存-依赖 CacheHelper
缓存依赖文件或文件夹 //创建缓存依赖项 CacheDependency dep = new CacheDependency(fileName);//Server.MapPath("&quo ...
- 我们为什么要在 PHPStorm 中标记目录
问题来源 (1)要开发的项目位于PHPStorm打开的项目的二级目录下,使用PHPStorm来开发Laravel项目 提供的教程在代码自动定位和智能提醒方面,存在无效的情况: (2)使用gulp作为项 ...