最近公司的项目用到比较多的上传图片的操作,所以用到了基于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 索引无效的问题的更多相关文章

  1. uploadPreview上传图片前预览图片

    uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!DOCTYPE html PUBLIC "- ...

  2. js上传图片前预览方法(支持预览多个图片)

    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...

  3. javscript上传图片前预览的方法setPreViewImage()

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  5. hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  6. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  7. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  8. FileReader与URL.createObjectURL实现图片、视频上传前预览

    之前做图片.视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览.实际上这只是文件“上传后再预览”,这既浪 ...

  9. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

随机推荐

  1. Selenium Webdriver——实现截图功能

    截图方法 public static void snapshot(TakesScreenshot drivername, String filename) { // this method will ...

  2. 在线OFFICE方案

    Office在线预览及PDF在线预览的实现方式大集合 在线浏览office 文件 在线预览文档openoffice+swfTool 类百度文库文档上传.转换和展示功能项目开源代码 微软的office ...

  3. LUA表与函数的深入理解

    local heroInfo = {} --直接打印 table的名字,就会输出该table的内存地址 print("表地址---------------",heroInfo) - ...

  4. react-native 组件的导入、导出

    一.前言背景: 学习react native的关键在于组件,依靠组件的拼接达到想要的效果,由此可见,组件就像一块块功能各异的零件,最终搭建出我们想要的效果. 今天我们就从组件的导入.导出开始 下面是我 ...

  5. c语言寄存器变量

    寄存器存在于CPU内部,运算速度非常快, 因为内存中的数据必须载入寄存器才能计算.如果直接定义一个变量为寄存器变量,则少了载入等过程自然会快.对于频繁使用的变量可以把它放在寄存器中来提速度. 对于VC ...

  6. pl/sql登录时,数据库下拉框没有任何内容

    打开plsql时突然发现database下拉框里面没有任何配置信息,如下图: 解决方法: 找到环境变量TNS_ADMIN,修改存放tnsnames.ora的路径:

  7. 二分图 and code1170 双栈排序

    6.6二分图 二分图是这样一个图: 有两顶点集且图中每条边的的两个顶点分别位于两个顶点集中,每个顶点集中没有边直接相连接. 无向图G为二分图的充分必要条件是,G至少有两个顶点,且其所有回路的长度均为偶 ...

  8. jquery怎么根据后台传过来的值动态设置下拉框、单选框选中

    $(function(){ var sex=$("#sex").val(); var marriageStatus=$("#marriageStatus").v ...

  9. sqlserver怎么将excel表的数据导入到数据库中

    在数据库初始阶段,我们有些数据在EXCEL中做好之后,需要将EXCEL对应列名(导入后对应数据库表的字段名),对应sheet(改名为导入数据库之后的表名)导入指定数据库, 相当于导入一张表的整个数据. ...

  10. 前端福利之盘飞那个 "阿里矢量图" (转)

    一.准备工作 1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源, ...