jquery和thinkphp利用formData属性ajax上传并,添加水印,裁剪,实现预览

首先新建看控制器部分
IndexController

<?php
namespace Backend\Controller;
use Think\Controller;

class IndexController extends Controller {
 

   publicfunction index(){
       $imgList = M('Img')->query('select ImgUrl,ImgNamefrom img where deleted = 0');
       $this->assign('imgList',$imgList);
       $this->display();//$upload->upload('./upload/images/')
    }
    Publicfunction ajaxImgUpload(){
      $imageSizeArray =array('96,60','265,165','400,248','880,545','240,220');//裁剪规格
       $upload = new\Think\Upload($this->getimagetype());#实例化上传类
       $fileName = rand(1111, 9999) . time();
       $upload->saveName = md5($fileName);
       $path =$this->_addFilePath($upload->saveName);
       $upload->rootPath = './upload/images/' .$path;
       $upload->subName = '';
       // 上传文件
       $info  =  $upload->upload();
       if(!$info) {
           $this->ajaxSuccess('',array('msg'=>$upload->getError(),'isError'=>true));
       }else{
           $image = new \Think\Image();
           $imgPath =$upload->rootPath.$info['uploadFileName']['savename'];
           foreach( $imageSizeArray as $sizeArray ){
                   if( !is_array( $sizeArray ) ){
                           $sizeArray = explode(',', $sizeArray);
                   }
                   $saveName = substr($info['uploadFileName']['savename'], 0,32) . '_'. $sizeArray[0] . '_' . $sizeArray[1] .'.'.$info['uploadFileName']['ext'];
                   //$saveName = $file. '_' . $sizeArray[0] . '_' . $sizeArray[1].$info['uploadFileName']['savename'];
                   $trueSaveName =$upload-&gt;rootPath.$saveName;
                   //$this->resizeimage( $file, $sizeArray[0],$sizeArray[1], $trueSaveName );
                   $image->open($imgPath);
                   $image->thumb($sizeArray[0], $sizeArray[1],\Think\Image::IMAGE_THUMB_FIXED)->save($trueSaveName);
                   $imageinfo = getimagesize($trueSaveName);
                     if($imageinfo['0'] >= 720 * 3&& $imageinfo['1']>= 720 * 3){
                           $swname = 'watermark720.png';
                       }else if($imageinfo['0'] >= 480 * 3&& $imageinfo['1']>= 480 * 3){
                           $swname = 'watermark480.png';
                       }else if($imageinfo['0'] >= 240 * 3&& $imageinfo['1'] >= 240 * 3){
                           $swname = 'watermark240.png';
                       }else{
                           $swname = 'watermark120.png';
                       }
                   $waterPath = 'default/images/'.$swname;//水印地址
                   $image->open($trueSaveName)->water($waterPath,\Think\Image::IMAGE_WATER_CENTER,50)->save($trueSaveName);
               }
                   $image->open($trueSaveName)->water($waterPath,\Think\Image::IMAGE_WATER_CENTER,50)->save($imgPath);
                   $this->ajaxSuccess('',array('msg'=&gt;'图片上传成功','isError'=>false,'uploadInfo'=>$info));
           }
    }
    privatefunction _addFilePath($fineName)
    {
       $v1 = substr($fineName, 0, 2);
       $v2 = substr($fineName, 2, 2);
       $file_path = $v1 . '/' . $v2 . '/';

       $base_dir = './upload/images/';
       if (!is_dir($base_dir . $v1)) {
           mkdir($base_dir . $v1, 0775, true);
       }
       if (!is_dir($base_dir . $v1 . C('S') . $v2)) {
           mkdir($base_dir . $v1 . '/' . $v2, 0775, true);
       }
       return $file_path;
    }
   
    publicfunction getimagetype(){
       return array(
           'maxSize' => 3145728,
           'exts' =>array('jpg', 'gif', 'png', 'jpeg'),
           'autoSub' =>true,
       );
    }
       
   public functionaddImgInfo(){
      $info = I('param.info');
      $Img_url  =substr($info['uploadFileName']['savename'],0,2).'/'.substr($info['uploadFileName']['savename'],2,2).'/';
      $Img_name = $info['uploadFileName']['savename'];
       $dataArr = array(
           'ImgName'=>$info['uploadFileName']['savename'],
           'ImgUrl' =>$Img_url,
       );
      M("img")->data($dataArr)->add();
      if($result !==false){
          $this->ajaxSuccess('',array('msg'=>'添加图片成功','isError'=>false,'ImgUrl'=>$Img_url,'ImgName'=>$Img_name));
      }else{
          $this->_ajaxFailure('',array('msg'=>'添加图片失败','isError'=>true));
      }
   }
  
   protected function_ajaxSuccess($msg = '操作成功', array $data = array())
    {
       $ret = array('ret' => 'OK', 'msg'=>$msg, 'data' => $data);
       $this->ajaxExit($ret);
    }
    protectedfunction _ajaxFailure($msg = '操作失败', array $data = array())
       {
           $ret = array('ret' => 'ERROR','msg'  => $msg, 'data'=> $data);
           $this->ajaxExit($ret);
       }
    protectedfunction _ajaxExit($ret)
    {
       echo json_encode($ret, JSON_UNESCAPED_UNICODE);
       exit();
    }
   
}

前端html部分
index.html

<meta charset="utf-8">
<title>图片上传</title>
<scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">

</script>
<label class="control-label"for="bike_type">&nbsp;</label>
   <input style="display:none" name="userfile"type="file">
   <input id="newbikephotoName" name="bike_photo"value="" type="hidden">
   <input id="oldbikephotoName" value=""type="hidden">
<div class="controls"style="text-align:left;">
       <span id="imgArea">
           <foreach name="imgList" item="vo"key="k">
               <span>
                   <img onclick="del(this);"src="{:C('UPLOAD_IMG_PATH')}{$vo.ImgUrl}{$vo.ImgName}"style="max-height:200px;">
               </span>
           </foreach>
       </span>
       <spanclass="help-inline"></span>
       <br>
<divid="uploadphotoconfirm"></div>
<br>
       <form class="avatar-form"action="/CarWashShop/ajaxUploadImg" enctype="multipart/form-data"method="post" id="subid">
           <input class="avatar-input pull-left"style="margin-left:0px;width:auto;" id="uploadFileName"name="uploadFileName" onchange="ajaxUploadImg();"type="file">
       </form>
       <span class="help-inline">*请上传格式为.png.jpg .jpeg 的图片</span>
   </div>
<script>
    functionajaxUploadImg(){
      var formData = new FormData($( "#subid" )[0]);
      $.ajax({
           type: "POST",
           data:formData,
           autoSubmit: false,
           url: "/Index/ajaxImgUpload",
           enctype: 'multipart/form-data',
           async: false,
           dataType:'json',
           cache: false,
           contentType: false,
           processData: false,
       success: function (data) {
           if(data.data.isError==false){
               addImgInfo(data.data.uploadInfo);
           }else{
               alert(data.data.msg);
           }
           //modalAlert('文件上传',data.data.msg,'');
           //window.location.href=window.location.href;
       }
    });
}
    functionaddImgInfo(info){
       $.ajax({
               type: "POST",
               url: "/Index/addImgInfo",
               dataType:"json",
           data:{
               info:info,
             },
           success: function (data) {
           
               //modalAlert('提示',data.data.msg,'');
               var Img_name = data.data.ImgName;
               var Img_url = data.data.ImgUrl;
               var ImgPath = './upload/images/'+Img_url+Img_name
               var String ='<span>'+'<imgid="newbikephoto" src="'+ImgPath+'" style="max-height:200px;"onlick="del('+"'"+this+"'"+');"/>'+'</span>';
               $("#imgArea").append(String);
               
               //$("tbody").find("td:last").find(".xiche_boximg").find("div:last").html();
               //window.location.href = window.location.href;
             }
           });
    }
   function del(thisd){
      $(thisd).parent('span').remove();
   }
</script>

数据库需新建一个Img表 字段分别为ImgUrl  ImgName  deleted即可 
水印需自己准备几张图片,分别命名watermark720.png,watermark480.png,watermark240.png,watermark120.png