js实现上传文件实时显示缩略图

<input  name="coverImage" onClick="" onchange="setImagePreview(this);" type="file" style="text-align:center;float: left;"  placeholder="只能选取 jpg、jif、bmp格式 "  />

<div id="localImag" style=" 80%;height: 80%;text-align: center;margin: auto;">
   <img  id="imagePreview"  style="margin: auto;max- 250px; max-height: 200px;" alt="图片缺失" src="" />
</div>

<script type="text/javascript">
function setImagePreview(obj){
    var img=document.getElementById("imagePreview");
        /*img.src=getFullPath(obj);*/
        testSetPreviewImg(obj);
}   
   
   /**
    简单方式
   **/
   function testSetPreviewImg(docObj){
            var imgObjPreview=document.getElementById("imagePreview");

            var divs = document.getElementById("localImag");
                if (docObj.files && docObj.files[0]) {
                    //火狐下，直接设img属性
                    imgObjPreview.style.display = 'block';
                    //imgObjPreview.style.width = '80%';
                   // imgObjPreview.style.height = '80%';
                    //imgObjPreview.src = docObj.files[0].getAsDataURL();
                    //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                   imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
                } else {
                    //IE下，使用滤镜
                    docObj.select();
                    var imgSrc = document.selection.createRange().text;
                    var localImagId = document.getElementById("localImag");
                    //必须设置初始大小
                   // localImagId.style.width = "80%";
                    //localImagId.style.height = "80%";
                    //图片异常的捕捉，防止用户修改后缀来伪造图片
                    try {
                        localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                    } catch(e) {
                        alert("您上传的图片格式不正确，请重新选择!");
                        return false;
                    }
                    imgObjPreview.style.display = 'none';
                    document.selection.empty();
                }

}


   
   
   
   /**
   一般在处理图片上传时，通常的逻辑都是将源图片上传到服务器端，再由服务器端的语言进行缩放大小的操作。
    此种模式一般可以满足大部分的需求，但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图，再使用此种模式，将是一种浪费服务端资源以及带宽的方式，故我们考虑在浏览器端生成小图后再进行上传操作。
    _canvas获取到的是base64编码的图片编码，将其传输到后端写入文件即可。
    **/
function drawCanvasImage(obj,width, callback){  
  
     var $canvas = $('<canvas></canvas>'),  
        canvas = $canvas[0],  
        context = canvas.getContext('2d');  
  
     var img = new Image();  
  
     img.onload = function(){  
         if(width){  
             if(width > img.width){  
                 var target_w =  img.width;  
                 var target_h = img.height;  
             }else{  
                 var target_w = width;  
                 var target_h = parseInt(target_w/img.width*img.height);  
             }  
         }else{  
             var target_w =  img.width;  
             var target_h = img.height;  
         }  
         $canvas[0].width = target_w;  
         $canvas[0].height = target_h;  
  
         context.drawImage(img,0,0,target_w,target_h);  
         _canvas = canvas.toDataURL("image/png");  
        /* _canvas = canvas.toDataURL(); */ 
         /*console.log(_canvas);*/  
         try{
            callback(obj,_canvas);  
         }catch(e){}
         
     }  
     img.src = getFullPath(obj);  
  
}  
 /**函数getFullPath为获取选中的图片的本地地址**/ 
function getFullPath(obj)  
{  
    if(obj)  
    {  
        //ie  
        if (window.navigator.userAgent.indexOf("MSIE")>=1)  
        {  
            obj.select();  
            return document.selection.createRange().text;  
        }  
        //firefox  
        else if(window.navigator.userAgent.indexOf("Firefox")>=1 || $.browser.opera || $.browser.mozilla)  
        {  
            if(obj.files && window.URL.createObjectURL)  
            {  
                return window.URL.createObjectURL(obj.files[0]);  
            }  
            return obj.value;  
        }else if($.browser.safari){  
            if(window.webkitURL.createObjectURL && obj.files){  
                return window.webkitURL.createObjectURL(obj.files[0]);  
            }  
            return obj.value;  
        }  
        return obj.value;  
    }  
}


/**实现即时显示上传缩略图，**/
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>