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 οnclick="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" οnchange="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