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#】串口操作实用类
做工业通 信有很长时间了,特别是串口(232/485),有VB/VC/C各种版本的串口操作代码,这些代码也经过了多年的现场考验,应该说是比较健壮的代码,但 是目前却没有C#相对成熟的串口操作代码,最近 ...
- VLC播放RTSP视频延迟问题 (转)
原帖地址:http://blog.chinaunix.net/uid-26611383-id-3755283.html ======================================== ...
- 学习 TCP 三次握手和四次挥手
TCP三次握手和四次挥手的问题在面试中是最为常见的考点之一.很多读者都知道三次和四次,但是如果问深入一点,他们往往都无法作出准确回答. 本篇尝试使用动画来对这个知识点进行讲解,期望读者们可以更加简单地 ...
- query简洁弹出层代码
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- 2015年传智播客JavaEE 第168期就业班视频教程16-框架结构测试(加载全spring配置文件)+struts2属性驱动测试
模块的规范化我们已经做完了,下面我们要做我们的功能了. 如果是模型驱动就是name="对应model的name" 如果用属性驱动的话,必须得把表现层(Action类)里面映射的用于 ...
- 【BZOJ3489】A simple rmq problem【kd树】
题意 给出一个长度为n的序列,给出M个询问:在[l,r]之间找到一个在这个区间里只出现过一次的数,并且要求找的这个数尽可能大.如果找不到这样的数,则直接输出0.我会采取一些措施强制在线. 分析 预处理 ...
- [leetcode]253. Meeting Rooms II 会议室II
Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2],...] (si ...
- 基于 Web 的远程 Terminal 模拟器安装使用详解
http://lzw.me/a/shellinabox.html 一.Shellinabox 简介 Shellinabox 是一个基于 web 的终端模拟器,采用 C 语言编写,使用 Ajax 与后端 ...
- Android Studio修改默认Activity继承AppCompatActivity
在Android Studio中新建Activity默认继承AppCompatActivity,感觉这点十分不爽,找了很久,终于发现在android Studio安装目录下有个模板文件,修改其中的参数 ...
- ios9出现的问题
升级后需要注意两个地方 1 在build Settings 搜索bitcode 设置成no 2 在info.plist里添加以下属性 程序中报错: App Transport Security ...