最近公司的项目用到比较多的上传图片的操作,所以用到了基于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. 合并SCVMM虚拟机的差异磁盘,并删除那些难以删除的Checkpoints(Shapshots)

    使用Microsoft Data Protection Manager(DPM)有时会造成虚拟机的动态和固定磁盘变成差异磁盘,这个应该与DPM进行差异备份有关,未知原因造成DPM差异备份后无法复原原来 ...

  2. 迷你MVVM框架 avalonjs 学习教程9、类名操作

    ms-class是avalon用得最多的几个绑定之一,也正因为如此其功能一直在扩充中.根据时期的不同,分为旧风格与新风格两种. 旧风格是指ms-class-xxx=”expr”,*ms-class-a ...

  3. $in 操作符

    [$in 操作符] The $in operator selects the documents where the value of a field equals any value in the ...

  4. 第6章 数组、指针与字符串(一)基于范围的for循环

  5. Oracle_in_not-in_distinct_minsu的用法

    create table a( id int, username ) ); create table b( id int, username ) ); ,'小明'); ,'小红'); ,'小君'); ...

  6. Going Home(最小费用最大流)

    Going Home http://poj.org/problem?id=2195 Time Limit: 1000MS   Memory Limit: 65536K Total Submission ...

  7. SpringBoot31 重识Spring01-环境搭建、Actuator监控、属性配置、多环境配置

    1 前言 1.1 学习阶段说明 从2016年9月开始接触IT,学习经历主要分为以下三个阶段 1.1.1 入门阶段 从最基础的前端技术HTML.JavaScript.CSS开始入门,再到后端技术Java ...

  8. Golang之Struct(二叉树定义)

    接招吧,看代码: package main import "fmt" //二叉树结构体 //如果每个节点有两个指针,分别用来指向左子树和右子树,我们把这样的结构叫做二叉树 type ...

  9. MongoDB增加用户认证: 增加用户、删除用户、修改用户密码、读写权限、只读权限

    1.添加并验证用户 > use admin> db.addUser("zjx","tsjianxin") #添加用户 > db.auth(&q ...

  10. Android 集成支付宝第三方登录

    前言: 在集成支付宝支付的时候遇到一点小麻烦,先在此记录供大家参考 1.授权 支付宝第三方登录需要在后台进行授权,在查看授权的时候我们一定要看清楚时候真的已经获得了权限(我在没有获取权限的情况下集成的 ...