«

javascript实现即时显示上传缩略图

时间:2024-1-19 17:11     作者:韩俊     分类: Javascript


javascript实现即时显示上传缩略图,记录在此,以备后用!注意这里仅仅通过javascript实现了这样一个效果,即选中上传文件之后只是通过js调用图片存储在本地的文件地址,然后显示出来。这个过程中没有上传图片到服务器的操作,这个和 uploadify 这个插件不一样,uploadify 上传插件是在选择文件的过程中就已经将图片上传到服务器了,实时显示的文件也是服务器上的文件。

需要了解 uploadify 这个插件的朋友可以参照本站文章:

Uploadify(JQuery上传插件)使用配置详解

下面是本示例的效果图:

javascript实现即时显示上传缩略图

以下是具体的代码:

<html xmlns="http://www.maopiaopiao.com/javascript-function/61.html">
<head>
<meta content="text/html; charset=utf-8" http-equiv=content-type>
<meta name=author content="Laruence(www.laruence.com)">
<title>即时显示上传缩略图</title>
</head>
<body style="text-align:center;">
<div>
<div style="width:200px; height:200px; border:1px solid #666;"><img id="img"  style="visibility:hidden;" height="100%" width="100%"></div>
<div style="margin-top:8px;"><input id="file" type="file" onChange="preivew(this,'img');"></div>
</div>
<script language="javascript" type="text/javascript">
var allowExt=['jpg', 'gif', 'bmp', 'png', 'jpeg'];
var preivew=function(file, container){
    try{
        var pic=new Picture(file, document.getElementById(container));
    }catch(e){
        alert(e);
    }
}
//缩略图类定义
var Picture=function(file, container){
    var height=0,
    widht =0,
    ext='',
    size=0,
    name='',
    path='';
    var self=this;
    if(file){
        name=file.value;
        if(window.navigator.userAgent.indexOf("MSIE")>=1){
            file.select();
            path=document.selection.createRange().text;
        }else if(window.navigator.userAgent.indexOf("Firefox")>=1){ 
            if(file.files){
                path=file.files.item(0).getAsDataURL();
            }else{
                path=file.value;
            }
        }
    }else{
        throw '无效的文件';
    }
    ext=name.substr(name.lastIndexOf("."), name.length);
    if(container.tagName.toLowerCase()!='img'){
        throw '不是一个有效的图片容器';
        container.visibility='hidden';
    }
    container.src=path;
    container.alt=name;
    container.style.visibility='visible';
    height=container.height;
    widht=container.widht;
    size=container.fileSize;
    this.get=function(name){
        return self[name];
    }
    this.isValid=function(){
        if(allowExt.indexOf(self.ext)!==-1){
            throw '不允许上传该文件类型';
            return false;
        }
    }
}
</script>
</body>
</html>

标签: javascript

热门推荐