案例一：ThinkPHP + JQuery + uploadify插件上傳單張圖片

問題提出： 

項目中要編輯用戶信息，其中須要上傳用戶的頭像圖片。

實際操做流程：進入用戶信息編輯頁面=>>填寫用戶信息=>>上傳用戶頭像圖片=>>保存用戶信息。

uploadify上傳頭像是異步上傳，上傳後頭像圖片數據保存在img表中，用戶信息表info中保存img的id。

問題：

1、使用ThinkPHP + uploadify異步上傳圖片；

2、若是用戶頭像已經存在，則要先刪除用戶原來的頭像數據，包括img表中的數據以及服務器上面的圖片文件；

3、若是操做中，上傳了屢次頭像，則每次上傳都先刪除上一次上傳的頭像；

4、圖片上傳完成後，在頁面顯示圖片的縮略圖；

5、返回表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格式轉換一下），有知道的童鞋也望分享一下。