ajaxfileUpload ajax 上传图片使用

前台html:

 <div class="b-mg15 img-text" room_id="<?= $items['id'] ?>">
                                 <a class="modal-get">
                                     <img <?php if ($items['room_image']) {
                                         $url = Url::to('@web' . '/' . $items['room_image']);
                                         echo 'src' . '=' . $url;
                                     } ?> id="room_image">
                                 </a>
                                 <div class="pull-txt upload_image"
                                      room_id="<?= $items['id'] ?>" <?php if ($items['room_image']) echo "style=\"display: none\"" ?>>
                                     <div class="b-mg15 t-mg60">
                                     <span class="glyphicon glyphicon-user f50">
                                     </span>
                                     </div>
                                     <a class="">
                                         点击上传会议室图片
                                     </a>
                                 </div>

js代码：

   $(".img-text").click(function () {
         $("#fileToUpload").click();
         $("#fileToUpload").attr('room_id', $(this).attr('room_id'));
     });
     //选择文件之后执行上传
     $('#fileToUpload').on('change', function () {
         $.ajaxFileUpload({
             url: "<?=Url::toRoute('ajax-upload')?>",
             secureuri: false,
             fileElementId: 'fileToUpload',//file标签的id
             dataType: 'json',//返回数据的类型
             data: {_csrf: "<?=Yii::$app->request->getCsrfToken()?>", room_id: $(this).attr('room_id')},//一同上传的数据
             success: function (data) {
                 //把图片替换
                 $("#room_image").attr('src', data.result);
                 window.location.reload();
             },
             error: function (data, status, e) {
                 alert(e);
             }
         });
     });

后台 php 代码：

  /**
      * ajax 上传图片
      * @return string
      */
     public function actionAjaxUpload()
     {
         return json_encode(MeetRoomService::AjaxUploadImage());
     }

   /**
      * ajax 上传图片
      * @return string
      */
     public static function AjaxUploadImage()
     {
         $returnData = [];
         $company_id = Yii::$app->company->getId();
         $room_id = Yii::$app->request->post('room_id','');
         $room = MeetRooms::find()->where(['id'=>$room_id])->one();
         $typeArr = array("jpg", "png", "gif");//允许上传文件格式
         $path = 'meetRoomImg/' . $company_id.'/';
         $dirPath = 'meetRoomImg';
         if(!file_exists($dirPath))
         {
             mkdir($dirPath, 0777);
             chmod($dirPath, 0777);
         }
         if (!file_exists($path)) {

             mkdir($path, 0777);
             chmod($path, 0777);
         }
         if (isset($_POST)) {
             $name = $_FILES['upfile']['name'];
             $size = $_FILES['upfile']['size'];
             $name_tmp = $_FILES['upfile']['tmp_name'];
             if (empty($name)) {
                 $returnData['error'] = '您还未选择图片';
                 $returnData['code'] = 400;
                 return $returnData;
             }
             $type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型
             if (!in_array($type, $typeArr)) {
                 $returnData['error'] = '请上传jpg,png或gif类型的图片！';
                 $returnData['code'] = 400;
                 return $returnData;
             }
             if ($size > (5000 * 1024)) {
                 $returnData['error'] = '图片大小已超过5000KB';
                 $returnData['code'] = 400;
                 return $returnData;
             }
             $yCode = array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J');
             $orderSn = $yCode[intval(date('Y')) - 2011] . strtoupper(dechex(date('m'))) . date('d') . substr(time(), -5) . substr(microtime(), 2, 5) . sprintf('%02d', rand(0, 99));
             $pic_url = $path . '/' . date('Y-m-d') . $orderSn . '.' .$type;
             $pic_name = date('Y-m-d') . $orderSn . '.' .$type;
             if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹
                 $room->room_image = $pic_url;
                 $room->save(false);
                 $returnData['error'] = '0';
                 $returnData['result'] = $pic_url;
                 $returnData['code'] = 200;
             } else {
                 $returnData['error'] = '上传有误，清检查服务器配置！';
                 $returnData['code'] = 400;
             }
             return $returnData;
         }
     }

注意问题：

上传成功之后没有执行回调函数。

打开ajaxfileupload.js拉到底下找到

[javascript] view plain copy
if ( type == "json" ) {
eval( "data = " + data );
}

改成：
[javascript] view plain copy
if ( type == "json" ) {
data = data.replace("<pre>","").replace("</pre>","");
//data = eval("("+data.replace("<pre>","").replace("</pre>","")+")");

链接：http://pan.baidu.com/s/1c2HWlRa 密码：ofb0