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 );//返回数据。   }