javascript实现上传图片并预览的效果代码实例

最新推荐文章于 2023-02-05 11:18:44 发布

weixin_30824277

最新推荐文章于 2023-02-05 11:18:44 发布

阅读量180

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/huabingchen/archive/2011/04/11/2012654.html

版权

图片上传预览，就是在使用文件选择框选择了文件之后就可以在页面上看见图片的效果，关于这个效果我一直认为是无法做到的，今天用alphaimageloader滤镜的src属就是其中的主角它将使用绝对或相对url地址指定背景图像。假如忽略此参数，滤镜将不会作用。

    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
    <html xmlns="http://www.3ppt.com /">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312" />
    <title></title>
    <style type="text/css教程">
    #picshow
    {
        filter:progid:dximagetransform.microsoft.alphaimageloader(sizingmethod=scale);
        width:88px;
        height:125px;
    }
    </style>
    <script type="text/网页特效" language="javascript">
    
    </script>
    </head>
    <body>
    <div id="picshow"></div>

    <p>选择图片：<input type="file" size="20" οnchange="upimg(this);" /></p>
    </body>
    </html>

实例二、同时兼容ie6,ie7,ie8和 firefox。

    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script>
    var picpath;
    var image;
    // preview picture
    function preview()
    {
    document.getelementbyid('preview').style.display = 'none';
    // 下面代码用来获得图片尺寸，这样才能在ie下正常显示图片
    document.getelementbyid('box').innerhtml
    = "<img width='"+image.width+"' height='"+image.height+"' id='apic' src='"+picpath+"'>";
    }
    // show view button
    function buttonshow()
    {
    /*
    这里用来解决图片加载延时造成的预览失败.
    简单说明一下，当image对象的src属性发生改变时javascript会重新给image装载图片内容，
    这通常是需要一些时间的，如果在加载完成之前想将图片显示出来就会造成错误，所以我们
    通过图片的宽度和高度来判断图片是否已经被成功加载，加载完毕才会显示预览按钮.
    这里我仍然有一个困惑，在ie7下预览效果偶尔会失效.
    */
    if ( image.width == 0 || image.height == 0 ) {
    settimeout(buttonshow, 1000);
    } else {
    document.getelementbyid('preview').style.display = 'block';
    }
    }
    function loadimage(ele) {
    picpath   = getpath(ele);
    image     = new image();
    image.src = picpath;
    settimeout(buttonshow, 1000);
    }
    function getpath(obj)
    {
    if(obj)
    {
    //ie
    if (window.navigator.useragent.indexof("msie")>=1)
    {
    obj.select();
    // ie下取得图片的本地路径
    return document.selection.createrange().text;
    }
    //firefox
    else if(window.navigator.useragent.indexof("firefox")>=1)
    {
    if(obj.files)
    {
    // firefox下取得的是图片的数据
    return obj.files.item(0).getasdataurl();
    }
    return obj.value;
    }
    return obj.value;
    }
    }
    </script>
    </head>
    <body>
    <input type="file" name="pic" id="pic" οnchange='loadimage(this)' />
    <input id='preview' type='button' value='preview' style='display:none;' οnclick='preview();'>
    <div id='box'></div>
    </body>
    </html