eWebeditor在IE8、IE9中插入图片按钮不能使用问题的解决方法 - nhpyliner的专栏
- 博客频道 - CSDN.NET
解决步骤如下：
1、找到editor.js文件（文件搜索下，立刻找到）
2、找到如下红色代码
if (element.YUSERONCLICK) eval(element.YUSERONCLICK + &anonymous()&);
3、用下面蓝色代码替换上面的红色代码
//修改ewebeditor1,以便在IE9\8\7及遨游里能够正常使用编辑器
if(navigator.appVersion.match(/MSIE (7|8|9)\./i)!=null || navigator.appVersion.match(/MAXTHON/i)=='MAXTHON')
& if (element.YUSERONCLICK)
&& eval(element.YUSERONCLICK + &onclick(event)&);&&
& if (element.YUSERONCLICK)
&& eval(element.YUSERONCLICK + &anonymous()&);
//修改ewebeditor1结束
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：54589次
排名：千里之外
原创：32篇
转载：34篇
评论：14条
(1)(1)(1)(1)(3)(1)(1)(1)(2)(2)(2)(1)(2)(3)(3)(2)(1)(3)(1)(1)(2)(1)(1)(1)(1)(12)(2)(13)(1)如何使用js实现IE9下上传图片并预览_javascript吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：43,174贴子：
如何使用js实现IE9下上传图片并预览收藏
gui_photos = document.getElementById('gui_photo-button-fileInputEl').files[0];在IE9下说是获取不到“0”属性，但在火狐和谷歌下是好的，求大神指导
找个js上传插件就好，不然用webuploader也行，挺不错的
IE 9 完全不支援 File API，请使用其他方法上戴。
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或JavaScript实现本地图片上传预览功能（兼容IE、chrome、FF）
-------------
新增文件夹...
新增文件夹
(多个标签用逗号分隔)
需要解决的问题有：本地图片如何在上传前预览、编辑；
最近发现这个功能很多是基于flash实现的，很多JavaScript实现的代码兼容性都很差，特别是在IE和firefox和chrome三个浏览器上不兼容。
代码实现主要利用到jquery插件imgAreaSelect，FileReader对象（chrome和ff获取本地图片数据的接口），IE滤镜效果。
关键词：imgAreaSelect FileReaderdocument.selection.createRange()&IE滤镜效果
一、实现上传前预览
1.1、页面显示
代码1-1显示的是html需要展示的web页面信息
&!—预览图片显示区域--&
&div id=”image_area”&
&img id="biuuu"src="#" title="biuuu"&
&!—图片上传区域--&
&div id =”upload_area”&
&form name = "form1"action =' /person?c=changeAtvatar' enctype = 'multipart/form-data' method = 'POST'&
&input type="file"id="picpath" name="atvatar_image"&
&a href="javascript:void(0);"class="button"& 上传照片&/a&
&input type='text'name="path" readonly&
&div id = “submit_button”&
&a href="javascript:void(0);"class='button'&确认&/a&
&/div& 代码1-1
为了修改input file的按钮名称，我们添加了一段代码，这个在第二节将会详细说明
&a href="javascript:void(0);" class="button"&上传照片&/a&
&input type='text'name="path" readonly&1.2、实现预览在线编辑
这里我们主要使用了一个插件进行图片编辑，如果需要具体查看学习可查看网址
，使用方法还是很简单方便的。
$('#biuuu').imgAreaSelect({
aspectRatio:'1:1', //截取比例
show:true,
resizable:true, //是否可调整大小
autoHide: false,//选择框选择完毕是否自己取消
handles:true,
key:true, //是否启用键盘，默认为false
//x1: 75, y1: 30, x2:225, y2: 180, //需要处理的区域，原始的
//x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标
keys: { arrows: 1,ctrl: 5, shift: 'resize' }, //调整像素大小
//onInit:function(img, selection) { ias.setSelection(100, 50, 250, 150, true);ias.update(); }, //设置初始函数 画出选择框
onSelectChange:preview //选框移动时触发的事件
//onSelectEnd:function(img, select){alert(select.width)} //选框结束时触发的事件
}); 代码1-2
代码1-2主要是设置需要编辑图片的一些插件属性，具体查看插件的参量说明。
首先我们需要创建一个预览小图片在img之后
$('&div&&imgid="view" src='+atvatarUrl+' style="position:"/&&/div&')
float: 'left',
position:'relative',
overflow:'hidden',
width: '100px',
height: '100px'
}).insertAfter('#biuuu');//把新建元素放到 #biuuu 之后 代码1-3
代码1-3是创建一个小预览图片在img之后
1.3、实现在线预览功能
function previewImage(file)
var porImg = $('#biuuu'),//首先获取大图片jquery对象
viewImg = $('#view');//小图片jquery对象
//判断该浏览器是否为w3c标准，既非IE浏览器
if (file["files"] && file["files"][0])
//使用JavaScript的FileReader对象来读取本地数据，并且将数据结果赋值给image的src，具体该对象如何实现的还未深入研究
var reader = newFileReader();
reader.onload =function(evt){
porImg.attr({src :evt.target.result});
viewImg.attr({src: evt.target.result});
reader.readAsDataURL(file.files[0]);
function previewImage(file)
var porImg = $('#biuuu'),//首先获取大图片jquery对象
viewImg = $('#view');//小图片jquery对象
//判断该浏览器是否为w3c标准，既非IE浏览器
if (file["files"] && file["files"][0])
//使用JavaScript的FileReader对象来读取本地数据，并且将数据结果赋值给image的src，具体该对象如何实现的还未深入研究
var reader = newFileReader();
reader.onload =function(evt){
porImg.attr({src :evt.target.result});
viewImg.attr({src: evt.target.result});
reader.readAsDataURL(file.files[0]);
//如果是IE浏览器，采用滤镜效果，进行显示，但特别注意的是该滤镜效果使用的对象是div对象，并非img对象，因此我们需要将原有的img对象remove同时生成新的div对象，并且赋值相应的class和id
//创建需要滤镜显示的div的dom对象
var ieImageDom =document.createElement("div");
var proIeImageDom =document.createElement("div");
//设置对象的css属性和原有的img对象属性相同，添加相应的id属性值
$(ieImageDom).css({
float: 'left',
position:'relative',
overflow:'hidden',
width: '100px',
height: '100px'
}).attr({"id":"view"});
$(proIeImageDom).attr({"id":"biuuu"});
//删除原有img对象，append创建div的dom对象
porImg.parent().prepend(proIeImageDom);
porImg.remove();
viewImg.parent().append(ieImageDom);
viewImg.remove();
//采用滤镜效果生成图片预览
file.select();
path =document.selection.createRange().
$(ieImageDom).css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});
$(proIeImageDom).css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});
// .style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")";//使用滤镜效果
这样就可以实现一个图片的在线编辑以及上传在预览功能。
要注意，代码必须要使用客户端访问，例如：http://loacalhost/imgpreview/index.html，不要直接点击index.html访问
转自:http://blog.csdn.net/danhuang2012/article/details/7703606
相关资讯 　—　
相关文档 　—　
发布时间： 22:22:17
同类热门经验
12341次浏览
28532次浏览
11548次浏览
21310次浏览
10681次浏览
6385次浏览
OPEN-OPEN, all rights reserved.Editor在ie9下按钮功能无效无法上传图片 - 生活在继续
- 博客频道 - CSDN.NET
editor.js，找到function BtnMouseUp()函数
if(navigator.appVersion.match(/9./i)=='9;'
|| navigator.appVersion.match(/8./i)=='8.' || navigator.appVersion.match(/MAXTHON/i)=='MAXTHON'){
if (element.YUSERONCLICK) eval_r(element.YUSERONCLICK + &onclick(event)&);
if (element.YUSERONCLICK) eval_r(element.YUSERONCLICK + &anonymous()&);
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：187496次
积分：3629
积分：3629
排名：第3784名
原创：221篇
转载：40篇
评论：21条
(4)(1)(3)(1)(5)(1)(3)(6)(1)(6)(6)(1)(1)(1)(5)(2)(2)(1)(1)(4)(3)(2)(5)(4)(1)(1)(1)(3)(1)(3)(16)(41)(17)(2)(14)(2)(15)(6)(1)(1)(2)(2)(5)(4)(4)(19)(3)(1)(1)(3)(5)(5)(1)(1)(1)(2)(4)(4)(1)CSS 按钮背景图片不显示 在谷歌浏览器下可以，在ie下不显示，代码如下：, CSS 按钮背景图片不显示 在谷歌
CSS 按钮背景图片不显示 在谷歌浏览器下可以，在ie下不显示，代码如下： text/
BORDER-LEFT-STYLE;
BORDER-TOP-STYLE./
FONT-FAMILY;/css&quot.: name=&quot: #000000;&&lt: 28; class=&&gt: 27
COLOR: 107;;
LINE-HEIGHT.gif): repeat-x.btn {
BACKGROUND-IMAGE;style&B1&quot: url(; value=&quot: none:images/}&lt:
BACKGROUND-REPEAT; type=&btn&&quot: T
BORDER-RIGHT-STYLE;
BORDER-BOTTOM-STYLE;28px&input
height=&submit&quot&style type=&quot yangpan-25 CSS 按钮背景图片不显示 在谷歌浏览器下可以，在ie下不显示，代码如下：
的代码真复杂啊.btn{searchgoods:#000:107line-height:27px.gif) no-color.&#47:28px:0;images&#47.:url(;border
height: 107width: 28
提交按钮有默认的背景样式，其中包括背景颜色，在样式中把backgroud-image改为backgrond即可
检查你图片的url写错没
这个应该是可以显示的哈