最近公司的项目用到比较多的上传图片的操作,所以用到了基于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;" />