img

最新推荐文章于 2023-05-18 11:33:20 发布

dchuan

最新推荐文章于 2023-05-18 11:33:20 发布

阅读量135

点赞数

文章标签： JavaScript prototype Microsoft IE EXT ViewUI

本文链接：https://blog.csdn.net/dchuan/article/details/83774637

版权

Please select a picture showing the location of
Image size does not meet the requirements, select the image 10 * 10
IE6下面用js的innerHTML有时图片无法显示解决方法
document.getElementById("pic").innerHtml("<img src=\"" + imgPath + "\" style=\"width: 100px; height: 100px;\"/>") 用这样的方法常常IE6下面显示不了图片，用鼠标右键点击图片应该在的位置选择“显示图片”才能看到图片。

用以下函数：
function EnhancedImage(src, onLoaded) {
var self = this;
this.src = src;
this.width = 0;
this.height = 0;
this.onLoaded = onLoaded;
this.loaded = false;
this.image = null;

this.load = function() {
if (this.loaded)
return;
this.image = new Image();
this.image.src = this.src;
function loadImage() {
if (self.width != 0 && self.height != 0) {
clearInterval(interval);
self.loaded = true;
self.onLoaded(self); //将实例传入回调函数
}
self.width = self.image.width; //是number类型
self.height = self.image.height;
}
var interval = setInterval(loadImage, 100);
}
}

调用方法：
//imgPath是图片链接地址
if (imgPath!= "") {
var appname = navigator.appName.toLowerCase();
//判断是不是IE，这里不列举具体判断怎么判断IE6
if (appname.indexOf("netscape") == -1) {
//new一个EnhancedImage方法，返回一个img
var img1 = new EnhancedImage(imgPath, onImageLoad);
img1.load();
function onImageLoad(img1) {
document.getElementById('pic').innerHTML = "<img src=\'" + img1.src + "\' width=\"100\" height=\"100\"/>";
//jquery写法 $("#pic").html("<img src=\"" + img1.src + "\" style=\"width: 100px; height: 100px;\"/>");
}
} else {//不是IE6,就直接显示图片
document.getElementById('t6').innerHTML = "<img src=\'" + imgPath + "\' width=\"100\" height=\"100\"/>";
}
}
到此结束！(单张图片)

多张图片：

var appname = navigator.appName.toLowerCase();
//解决ie6图片显示问题
if (appname.indexOf("netscape") == -1) {
$("#ImgListl img").each(function(i) {
if ($(this)[0].width == 0 || $(this)[0].height == 0) {
var img1 = new EnhancedImage($(this)[0].src, onImageLoad);
img1.load();
function onImageLoad(img1) {

thispage.FormatDetail();//重新加载页面
}
}
});

<form name="form1" id="form1" method="post" action="#">
<input type="file" name="file" id="file" οnchange="preview()"/></form>

<script type="text/javascript">
function preview(){
var x = document.getElementById("file");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img");
if(y){
y.src = "file:///" + x.value;
}else{
var img=document.createElement("img");
img.setAttribute("src","file:///"+x.value);
img.setAttribute("width","120");
img.setAttribute("height","90");
img.setAttribute("id","img");
document.getElementById("form1").appendChild(img);
}
}else{
alert("您选择的似乎不是图像文件。");
}
}
</script>

<img id=img src="image/mz_hot04.jpg" name="img" width="111" height="95">

IE7在图片上传时，无法预览本地图片的问题解决方法
在 IE6 中，可以很方便地利用 img 的 src 属性，实现本地图片预览，然而在 IE7 中，这种办法却行不通。需要用 AlphaImageLoader。

具体操作：

1、为预览区域（比如要在某个 div 中预览）添加样式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。

2、为 AlphaImageLoader 设置 src 属性。
var newPreview = Ext.get("pic").dom;
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = 图片本地路径;
newPreview.style.width = "200px";
newPreview.style.height = "180px";

实例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>本地图片预览代码（支持 IE6、IE7）</title>
<style type="text/css">
#newPreview
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<script type="text/javascript" language="javascript">

</script>
</head>
<body>
说明：以下针对的是互联网情况，如果您在本地作测试，比如输入的地址是：[url=http://127.0.0.1/...，则可以看到全部预览。]http://127.0.0.1/...，则可以看到全部预览。[/url]

<hr />
如果您使用的是 IE6，则可以看到以下预览；如果您使用的是 IE7，则看不到以下预览。

<div id="oldPreview"></div>
<hr />
不论您使用的是 IE6 还是 IE7，均可以看到以下预览。

<div id="newPreview"></div>
<hr />
请选择一个图片进行预览：<input type="file" size="20" οnchange="javascript:PreviewImg(this);" />

</body>
</html>

AlphaImageLoader

说明：

在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。

语法：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
true：默认值。滤镜激活。
false：滤镜被禁止。

sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop：剪切图片以适应对象尺寸。
image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale：缩放图片以适应对象的尺寸边界。

src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

JS上传文件前预览本地图片(转) 收藏

例子如下：

< input id="file" type="file" οnfοcus="javascript:ShowImage(this.value,document.getElementById('img'))">
< br />
< img id="img" STYLE="visibility:hidden" height="100px" width="100px">

< script language="javascript" type="text/javascript">
//==============================
//功能:Javascript本地图片预览
//说明:简单的判断了文件的合法性
//适用于:上传文件前预览本地图片
//==============================
function ShowImage(value,img)
{
//alert(value);
//检测盘符
//alert(value.indexOf(':'));
//检测文件是否有扩展名
//alert(value.length-value.lastIndexOf('.'));
//取文件扩展名
//alert(value.substr(value.length-3,3));
//检测文件扩展名是否合法
//alert(CheckExt(value.substr(value.length-3,3)));

if(value.length>5&&value.indexOf(':')==1&&(value.length-value.lastIndexOf('.'))==4&&CheckExt(value.substr(value.length-3,3)))
{
img.src=value;
img.alt="本地图片预览";
img.style.visibility="visible";
}
else
{
img.style.visibility="hidden";
}
}
//检查扩展名是否合法,合法返回True
function CheckExt(ext)
{
//这里设置允许的扩展名
var AllowExt="jpg|gif|jpeg|png|bmp";
var ExtOK=false;
var ArrayExt;
if(AllowExt.indexOf('|')!=-1)
{
ArrayExt=AllowExt.split('|');
for(i=0;i<ArrayExt.length;i++)
{
if(ext.toLowerCase()==ArrayExt[i])
{
ExtOK=true;
break;
}
}
}
else
{
ArrayExt=AllowExt;
if(ext.toLowerCase()==ArrayExt)
{
ExtOK=true;
}
}
return ExtOK;
}
< /script>

使用new创建对象的过程。
（1）当解释器遇到new操作符时便创建一个空对象；
（2）开始运行class1这个函数，并将其中的this指针都指向这个新建的对象；
（3）因为当给对象不存在的属性赋值时，解释器就会为对象创建该属性，例如在class1中，当执行到this.p1=s这条语句时，就会添加一个属性p1，并把变量s的值赋给它，这样函数执行就是初始化这个对象的过程，即实现构造函数的作用；
（4）当函数执行完后，new操作符就返回初始化后的对象。
通过这整个过程，JavaScript中就实现了面向对象的基本机制。由此可见，在JavaScript中，function的定义实际上就是实现一个对象的构造器，
prototype是一个JavaScript对象，可以为prototype对象添加、修改、删除方法和属性。从而为一个类添加成员定义。
了解了函数的prototype对象，现在再来看new的执行过程。
（1）创建一个新的对象，并让this指针指向它；
（2）将函数的prototype对象的所有成员都赋给这个新对象；
（3）执行函数体，对这个对象进行初始化操作；
（4）返回（1）中创建的对象。
和上一节介绍的new的执行过程相比，多了用prototype来初始化对象的过程，这也和prototype的字面意思相符，它是所对应类的实例的原型。这个初始化过程发生在函数体（构造器）执行之前，所以可以在函数体内部调用prototype中定义的属性和方法，

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/HuDon/archive/2009/01/05/3714600.aspx

<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5" οnchange="preview5()"/>
</form>
<script type="text/javascript">
function preview5(){
var x = document.getElementById("file5");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img5");
if(y){
y.src = "file://localhost/" + x.value;
}else{
var img=document.createElement("img"); img.setAttribute("src","file://localhost/"+x.value);
img.setAttribute("width","120");
img.setAttribute("height","90");
img.setAttribute("id","img5");
document.getElementById("form5").appendChild(img);
}
}else{
alert("您选择的似乎不是图像文件。");
}}
</script>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片上传预览ie6,7,8, firefox</title>
<script language="javascript">
function checkPic(){
var picPath=document.getElementById("picPath").value;
var type=picPath.substring(picPath.lastIndexOf(".")+1,picPath.length).toLowerCase();
if(type!="jpg"&&type!="bmp"&&type!="gif"&&type!="png"){
alert("请上传正确的图片格式");
return false;
}
return true;
}
//图片预览
function PreviewImage(divImage,upload,width,height) {
if(checkPic()){
try{
var imgPath;
//图片路径
var Browser_Agent=navigator.userAgent;
//判断浏览器的类型
if(Browser_Agent.indexOf("Firefox")!=-1){
//火狐浏览器
imgPath = upload.files[0].getAsDataURL();
document.getElementById(divImage).innerHTML = "<img id='imgPreview' src='"+imgPath+"' width='"+width+"' height='"+height+"'/>";
}else{
//IE浏览器
var Preview = document.getElementById(divImage);
Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upload.value;
Preview.style.width = width;
Preview.style.height = height;
}
}catch(e){
alert("请上传正确的图片格式");
}
}
}
</script>
</head>

<body>
产品图片
<input type="file" id="picPath" name="doc" onChange="PreviewImage('Preview',this,120,120);" />
<div id="Preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);">
</div
</body>
</html>

dchuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
img

Please select a picture showing the location ofImage size does not meet the requirements, select the image 10 * 10IE6下面用js的innerHTML有时图片无法显示解决方法 document.getElementById("pic").innerHtml("") 用这样的...
复制链接

扫一扫