用js实现上传图片的效果

在写页面的时候，很多时候都会遇到上传图片的问题，下面的代码，可以直接在前台显示上传图片效果的，简单明了，需要的可以参考：

先来张效果图：

（未上传之前的显示页面）

（上传之后显示的页面，代码中可控制最多上传几张，可再次选择）

代码：

html：

<form class="opinion" id="comments" action=""  method="POST" enctype="multipart/form-data">
    <div class="photo" id="photodiv">
        <div id="photo">
            <input type="file" οnchange="imgChange(this)">
            <input type="hidden" class="uploadFile" name="uploadFile" value="">
        </div>
    </div>
</form>

css：

.photo{width:94%;padding:15px 3%;height:auto;float:left;border-bottom:1px solid #e1e1e1;}
.photo div{width:92px;height:92px;float:left;border:1px dashed #bdbdbd;border-radius:5px;overflow:hidden;background:url(../images/camera.png) no-repeat center center;background-size:40px auto;}
.photo div input{opacity:0;width:92px;height:92px;}

js：

<script>
    var imgCount=1;
// 前端只需要给input file绑定这个change事件即可（下面两个方法不需要修改）获取到图片
  function imgChange(ele){
     var imageUrl = getObjectURL($(ele)[0].files[0]);
     convertImgToBase64(imageUrl, function(base64Img){


        //base64Img为转好的base64,放在img src直接前台展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)
        //alert(base64Img);
        //  $("#base").attr("src",base64Img);
        //  
        var parentDiv=$(ele).parent();
        parentDiv.find(".uploadFile").val(base64Img.split(",")[1]);//上传的uploadFile
        parentDiv.css({"background":"url("+base64Img+")no-repeat center center", "width":"92px","height":"92px","float":"left","border":"1px dashed #bdbdbd","border-radius":"5px","overflow":"hidden"});
        //base64转图片不需要base64的前缀data:image/jpg;base64
        //alert(base64Img.split(",")[1]);
        //
          if(imgCount>=5){
            return false;
          }
         var $div = $("#photodiv");  
         var text='<div style="margin-left:10px;"><input type="file" οnchange="imgChange(this)"><span>上传照片</span>'
         '<input type="hidden" class="uploadFile" name="uploadFile" value=""></div>';        
         $div.append(text);
         imgCount++;    
      });
      //event.preventDefault(); 
  }
  //createobjecturl()静态方法创建一个包含了DOMString代表参数对象的URL。该url的声明周期是在该窗口中.也就是说创建浏览器创建了一个代表该图片的Url.
function getObjectURL(file) {
     var url = null ; 
      if (window.createObjectURL!=undefined){
     // basic
        url = window.createObjectURL(file) ;
      } else if (window.URL!=undefined){
     // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
      } else if (window.webkitURL!=undefined){
     //web_kit or chrome
        url = window.webkitURL.createObjectURL(file) ;
      }
      return url ;
     }




//生成图片的base64编码
function convertImgToBase64(url, callback, outputFormat){ 
     //html5 的convas画布
     var canvas = document.createElement('CANVAS'); 
     var ctx = canvas.getContext('2d'); 
     var img = new Image; 
     img.crossOrigin = 'Anonymous'; 
     img.onload = function(){
       var width = img.width;
       var height = img.height;
       // 按比例压缩4倍
       //var rate = (width<height ? width/height : height/width)/4;
       //原比例生成画布图片
       var rate = 0.1;
       canvas.width = width*rate; 
       canvas.height = height*rate; 
       ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate); 
 // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持 
        var dataURL = canvas.toDataURL(outputFormat || 'image/png'); 
        callback.call(this, dataURL); 
        canvas = null; 
      };
      img.src = url; 
    }
 </script>

这只是简单的示例  可自行进行编辑修改

不足：好像不支持ie9以下的版本