img

dchuan

浏览: 9592 次
性别:
来自: 北京

最近访客更多访客>>

tongsh6

dongguangming88

woodding2008

zr0243

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (6)

社区版块

存档分类

JavaScript prototype Microsoft IE EXT

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" onchange="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>
说明：以下针对的是互联网情况，如果您在本地作测试，比如输入的地址是：http://127.0.0.1/...，则可以看到全部预览。

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

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

<div id="newPreview"></div>
<hr />
请选择一个图片进行预览：<input type="file" size="20" onchange="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" onfocus="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" onchange="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>

分享到：

JAVA经典算法 | upload

2010-12-05 22:45
浏览 2841
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

img

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

img

评论

发表评论

相关推荐

最近访客更多访客>>