案例一：ThinkPHP + JQuery + uploadify插件上传单张图片

问题提出： 

项目中要编辑用户信息，其中需要上传用户的头像图片。

实际操作流程：进入用户信息编辑页面=>>填写用户信息=>>上传用户头像图片=>>保存用户信息。

uploadify上传头像是异步上传，上传后头像图片数据保存在img表中，用户信息表info中保存img的id。

问题：

一、使用ThinkPHP + uploadify异步上传图片；

二、如果用户头像已经存在，则要先删除用户原来的头像数据，包括img表中的数据以及服务器上面的图片文件；

三、如果操作中，上传了多次头像，则每次上传都先删除上一次上传的头像；

四、图片上传完成后，在页面显示图片的缩略图；

五、返回表img的id，保存到表info中；

解决：

引入jquery与uploadify文件及其他要用到的插件：

<script src="../Public/assets/js/libs/jquery-1.8.3.min.js"></script>

<!-- Uploadify 上传插件-->

<script src="../Public/plugins/uploadify/jquery.uploadify.js"></script>

<!-- msgBox 信息弹出插件-->

<script src="../Public/plugins/msgbox/jquery.msgbox.min.js"></script>

<!-- Url 获取URL地址参数的插件-->

<script src="../Public/plugins/url/url.min.js"></script>

上传表单：

<div class="control-group">

    <label class="control-label">头像</label>

    <div class="controls">

        <img alt="您还没有上传头像" src="__ROOT__{$wx.avatar}">//上传成功的头像缩略图将在这里显示

        <input type="hidden" name="wx[avatarid]"  value="">//接收上传成功后的数据表img的id

        <input type="file" id="wx-avatar">//上传点击按钮

    </div>

</div>

JS代码：

$(function(){
    var swfurl = "../Public/plugins/uploadify/";
    var uploaderurl = "{:U('uploadavatar')}";
    var sessionid = "{:session_id()}";
    var __root__ = "__ROOT__";

    $('#wx-avatar').uploadify({
        swf : swfurl + 'uploadify.swf',//swf文件路径
        uploader : uploaderurl + "?wxid=" + url('?wxid'),  // 服务器端接收处理文件上传的地址，这里使用url插件取得地址栏里面的用户ID，并发送到服务器端
         // Options
        auto : true,  // 文件添加到队列后自动上传
        buttonText : '点击上传头像图片',  // 上传按钮上面的文字
        fileSizeLimit : '2 MB',    // 上传文件的大小限制，可以使用B\KB\MB\GB单位，填0表示不限制。
        fileTypeDesc  : '图片',    //选择文件时关于文件类型的描述
        fileTypeExts : '*.jpeg;*.jpg;*.png;*.bmp',    // 选择文件时允许的扩展名
        height : 30,   // 上传按钮的高度
        width  : 120,    // 上传按钮的宽度
        formData  : {'session_id' : sessionid},   // 当文件上传时，随文件一起发送到服务器的其他数据,要将当前登录用户的session数据一起发送给服务器，否则服务器会报302错误，这是因为文件上传时，uploadify插件没有发送包括session在内的其他数据给服务器，thinkphp检测不到session，会认为用户没有登录，所以拒绝操作。
        overrideEvents  : ['onDialogClose','onSelectError','onUploadSuccess'],   //重写事件， 如果自定义了弹出窗，一定要重写onDialogClose事件，否则会跳两次窗（uploadify插件预设的警告+自己定义的弹出窗），onDialogClose设定后，uploadify预设的警告窗将不会弹出。
        onSelectError   : function(file, errorCode, errorMsg) { //重写选择时候出现的错误
            var msgText = "上传失败！\n\n";
            switch(errorCode){
                case -100:
                    msgText += "单次上传的文件最多"+this.settings.queueSizeLimit+" 个";
                    break;
                case -110:
                    msgText += "文件 [" + file.name + "] 大小超过限制!<br><br>温馨提示：图片大小不能超过 "+this.settings.fileSizeLimit;
                    break;
                case -120:
                    msgText += "文件 [" + file.name + "] 大小为0，不能上传";
                    break;
                case -130:
                    msgText += "文件 [" + file.name + "] 格式不正确，限： "+this.settings.fileTypeExts;
                    break;
                default: 
                    msgText += "错误代码:"+errorCode+"\n"+errorMsg;
            }
            $.msgbox(msgText);//调用msgbox插件弹出信息。
         },
         onUploadSuccess : function(file, data, response){
            var data=eval("("+ data +")");   //将回传的数据转换成json格式，这里我没有搞明白为什么要转换一次，我在其他地方后台使用$this->ajaxReturn($data)返回数据后就直接是json格式，不用转换，但是在这里不行，有知道原因的童鞋能否告知一下，谢谢。
            $('#wx-avatar').parent('.controls').find('img').remove();//将页面上原有的缩略图删除
            $('#wx-avatar').before("<img src='" + __root__ + data.imgdata.savepath + "sma_" + data.imgdata.name +"'>");//显示刚上传的图片的缩略图
            $('#wx-avatar').parent('.controls').find("input[name='wx[avatarid]']").val(data.imgdata.id);//将图片img表中的id给到input。
         }
      });
});

后台代码：

    /**
    * 图片上传方法
    * @param string $saveFolder   图片保存的文件夹（avatar、product、qrcode、other）
    * @param string $thumbwidth   缩略图宽度，多个用逗号隔开
    * @param string $thumbheight   缩略图高度，多个用逗号隔开，数量必须与宽度保持一致
    * @param string $thumbprefix   缩略图前缀，多个用逗号隔开，数量必须与宽度保持一致
    * @return 图片保存在数据库中的ID、路径、图片名称、用户ID、实体ID
    */
   Public function uploadImg($saveFolder = '', $thumbwidth = '', $thumbheight = '', $thumbprefix = '') {
      import ( 'ORG.Net.UploadFile' );
      $upload = new UploadFile (); // 实例化上传类
      $upload->maxSize = 3145728; // 设置文件上传大小
      $upload->allowExts = array (
            'jpg',
            'bmp',
            'png',
            'jpeg'
      ); // 设置文件上传类型
      $upload->savePath = './Uploads/Image/' . $saveFolder . '/' . $this->eid . '/'; // 设置文件上传目录
      $upload->thumb = true; // 是否需要对图片文件进行缩略图处理，默认为false
      $upload->thumbMaxWidth = $thumbwidth; // 缩略图的最大宽度，多个使用逗号分隔
      $upload->thumbMaxHeight = $thumbheight; // 缩略图的最大高度，多个使用逗号分隔
      $upload->thumbPrefix = $thumbprefix; // 缩略图的文件前缀，默认为thumb_
      $upload->thumbPath = ''; // 缩略图的保存路径，留空的话取文件上传目录本身
      if (! $upload->upload ()) { // 上传错误提示错误信息
         $this->error ( $upload->getErrorMsg () );
      } else { // 上传成功 获取上传文件信息
         $rs = $upload->getUploadFileInfo ();
         if ($rs) {
            $img ['eid'] = $this->eid;
            $img ['uid'] = $this->uid;
            $img ['savepath'] = substr ( $rs [0] ['savepath'], 1 );
            $img ['name'] = $rs [0] ['savename'];
            $img ['id'] = M ( 'img' )->add ( $img );//往img表插入图片信息
            if ($img ['id']) {
                return $img;//返回图片信息（id、savepath、name等）
            }
         } else {
            return false;
         }
      }
   }

头像上传代码：

    /**
    *头像上传
    */
   public function uploadavatar() {
      if (session ( '?lastavatarid' )) { // 如果多次上传头像图片，先根据session删除上一次上传的图片及缩略图、数据库信息。
         $lastimgid = session ( 'lastavatarid' );
         $lastimg = M ( 'Img' )->find ( $lastimgid );//根据id找到图片在img表中的信息。
         $file = $_SERVER ['DOCUMENT_ROOT'] . __ROOT__ . $lastimg ['savepath'] . $lastimg ['name'];
         $file_max = $_SERVER ['DOCUMENT_ROOT'] . __ROOT__ . $lastimg ['savepath'] . 'max_' . $lastimg ['name'];
         $file_mid = $_SERVER ['DOCUMENT_ROOT'] . __ROOT__ . $lastimg ['savepath'] . 'mid_' . $lastimg ['name'];
         $file_sma = $_SERVER ['DOCUMENT_ROOT'] . __ROOT__ . $lastimg ['savepath'] . 'sma_' . $lastimg ['name'];
         unlink ( $file ); //删除服务器上面的文件
         unlink ( $file_max ); //删除服务器上面的缩略图文件
         unlink ( $file_mid ); //删除服务器上面的缩略图文件
         unlink ( $file_sma ); //删除服务器上面的缩略图文件
         M ( 'Img' )->delete ( $lastimgid );//删除数据库中的信息
      }
      // 如果正在编辑的用户已经有头像图片，要先删除已有的头像图片
      $wxid = $_GET ['wxid'];//得到用户ID
      $wxinfo = M ( 'wx_info' )->find ( $wxid );
      $wximgdata = M ( 'Img' )->find ( $wxinfo ['avatarid'] );
      if ($wximgdata) {
         $file = $_SERVER ['DOCUMENT_ROOT'] . __ROOT__ . $wximgdata ['savepath'] . $wximgdata ['name'];
         $file_max = $_SERVER ['DOCUMENT_ROOT'] . __ROOT__ . $wximgdata ['savepath'] . 'max_' . $wximgdata ['name'];
         $file_mid = $_SERVER ['DOCUMENT_ROOT'] . __ROOT__ . $wximgdata ['savepath'] . 'mid_' . $wximgdata ['name'];
         $file_sma = $_SERVER ['DOCUMENT_ROOT'] . __ROOT__ . $wximgdata ['savepath'] . 'sma_' . $wximgdata ['name'];
         unlink ( $file );
         unlink ( $file_max );
         unlink ( $file_mid );
         unlink ( $file_sma );
         M ( 'Img' )->delete ( $lastimgid );
      }
      $imgdata = $this->uploadImg ( 'avatar', '600,300,100', '600,300,100', 'max_,mid_,sma_' );//调用图片上传方法上传头像
      if (! $imgdata) {
         $data ['success'] = '0';
         $data ['msg'] = '头像上传失败';
      } else {
         session ( 'lastavatarid', $imgdata ['id'] ); // 上传成功，session保存上传的图片ID
         $data ['success'] = '1';
         $data ['msg'] = '头像上传成功';
         $data ['imgdata'] = $imgdata;
         // $data ['wxid'] = $wxid;
      }
      $this->ajaxReturn ( $data );//返回数据。
   }

 

至此，整个头像上传过程结束，所需的JQuery插件已经分享在百度网盘，地址：http://pan.baidu.com/s/1dDgjiSh，大家有什么问题可以直接给我留言，上面我的那个问题（为什么后台回传的数据要进行json格式转换一下），有知道的童鞋也望分享一下。

转载于:https://www.cnblogs.com/tarrin/p/3524772.html