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

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

<div id="localImag" style="width: 80%;height: 80%;text-align: center;margin: auto;">
   <img  id="imagePreview"  style="margin: auto;max-width: 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>