前端上传图片生成canvas预览，并上传

<div class="cont lastimg" id="js-imgbox">



   <div class="btn upload"> 



   <input id="js-upload" type="file"> 



   </div>



   <span></span><span></span><span></span><span></span>
</div>

javascript

/*点击上传图片*/ $("#js-upload").change(function () { 
        var len = Mobject.imgarr.length; 
            if (typeof (FileReader) != "undefined") { 
                    var dvPreview = $("#js-imgbox span"); 
                    var regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/; 
                    $($(this)[0].files).each(function () { 
                    var file = $(this); 
                       if (regex.test(file[0].name.toLowerCase())) {
                         var reader = new FileReader(); 
                        reader.onload = function (e) {
                         var image=new Image();
                        image.src=e.target.result;
                        image.onload=function(){
                        //image.onload 图片加载成功  
                        //创建画布  
                        var canvas=document.createElement("canvas");
                        var ctx=canvas.getContext("2d");
                        var originWidth = this.width; 
                        var originHeight = this.height; // 最大尺寸限制  
                        var maxWidth = 600; // 目标尺寸  
                        var targetWidth; var targetHeight; 
                        targetHeight = Math.round(originHeight / (originWidth / maxWidth)); // canvas对图片进行缩放  
                        canvas.width = maxWidth; canvas.height = targetHeight; ctx.drawImage(image, 0, 0, canvas.width, canvas.height); 
                    //压缩后的数据 data  
                    var data=canvas.toDataURL("image/jpeg", 0.8); 
                    var base64 = data.replace(/^(data:\s*image\/(\w+);base64,)/,"");
                     Mobject.imgarr.push(base64); 
                       dvPreview[len].append(canvas); 
                       if(Mobject.imgarr.length>=4){ $(".upload").hide(); $("#js-upload").hide();
                        }
                    }
                }; reader.readAsDataURL(file[0]);
            } else { alert(file[0].name + " is not a valid image file."); return false;
            }
        });
    } else { alert("This browser does not support HTML5 FileReader.");
    }
});

php生成图片

for($i=0;$i<count($imgarr);$i++)
  { 
       $imgname = uniqid().'_'.$i; 
       $imgurl[$i] =$this->uploadimg($imgarr[$i],$imgname); 
  }
   $img = implode(',',$imgurl); 
  $this->insertcaseData($phone,$name,$city,$theme,$cont,$exp,$plan,$img);

/**  * 将上传的图片存储  * @param $photo  * @return string  */
  public  function uploadimg($photo,$imgname){
        header('Content-type:text/html;charset=utf-8');
        $base64_image_content = $photo;
        //匹配出图片的格式 
        $type = 'jpg';
        $new_file = "upload/".date('Ymd',time())."/";
        if(!file_exists($new_file)) {
            //检查是否有该文件夹，如果没有就创建，并给予最高权限 
            mkdir($new_file, 0700,true);
        }
        $new_file = $new_file.$imgname.".{$type}";
  
        file_put_contents($new_file,base64_decode($base64_image_content));
  
        return $new_file;

  }