用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" onchange="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;"
4000
><input type="file" onchange="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以下的版本