ajaxfileUpload ajax 上传图片使用
前台html:
1 <div class="b-mg15 img-text" room_id="<?= $items['id'] ?>"> 2 <a class="modal-get"> 3 <img <?php if ($items['room_image']) { 4 $url = Url::to('@web' . '/' . $items['room_image']); 5 echo 'src' . '=' . $url; 6 } ?> id="room_image"> 7 </a> 8 <div class="pull-txt upload_image" 9 room_id="<?= $items['id'] ?>" <?php if ($items['room_image']) echo "style=\"display: none\"" ?>> 10 <div class="b-mg15 t-mg60"> 11 <span class="glyphicon glyphicon-user f50"> 12 </span> 13 </div> 14 <a class=""> 15 点击上传会议室图片 16 </a> 17 </div>
js代码：
1 $(".img-text").click(function () { 2 $("#fileToUpload").click(); 3 $("#fileToUpload").attr('room_id', $(this).attr('room_id')); 4 }); 5 //选择文件之后执行上传 6 $('#fileToUpload').on('change', function () { 7 $.ajaxFileUpload({ 8 url: "<?=Url::toRoute('ajax-upload')?>", 9 secureuri: false, 10 fileElementId: 'fileToUpload',//file标签的id 11 dataType: 'json',//返回数据的类型 12 data: {_csrf: "<?=Yii::$app->request->getCsrfToken()?>", room_id: $(this).attr('room_id')},//一同上传的数据 13 success: function (data) { 14 //把图片替换 15 $("#room_image").attr('src', data.result); 16 window.location.reload(); 17 }, 18 error: function (data, status, e) { 19 alert(e); 20 } 21 }); 22 });
后台 php 代码：
1 /** 2 * ajax 上传图片 3 * @return string 4 */ 5 public function actionAjaxUpload() 6 { 7 return json_encode(MeetRoomService::AjaxUploadImage()); 8 }
1 /** 2 * ajax 上传图片 3 * @return string 4 */ 5 public static function AjaxUploadImage() 6 { 7 $returnData = []; 8 $company_id = Yii::$app->company->getId(); 9 $room_id = Yii::$app->request->post('room_id',''); 10 $room = MeetRooms::find()->where(['id'=>$room_id])->one(); 11 $typeArr = array("jpg", "png", "gif");//允许上传文件格式 12 $path = 'meetRoomImg/' . $company_id.'/'; 13 $dirPath = 'meetRoomImg'; 14 if(!file_exists($dirPath)) 15 { 16 mkdir($dirPath, 0777); 17 chmod($dirPath, 0777); 18 } 19 if (!file_exists($path)) { 20 21 mkdir($path, 0777); 22 chmod($path, 0777); 23 } 24 if (isset($_POST)) { 25 $name = $_FILES['upfile']['name']; 26 $size = $_FILES['upfile']['size']; 27 $name_tmp = $_FILES['upfile']['tmp_name']; 28 if (empty($name)) { 29 $returnData['error'] = '您还未选择图片'; 30 $returnData['code'] = 400; 31 return $returnData; 32 } 33 $type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型 34 if (!in_array($type, $typeArr)) { 35 $returnData['error'] = '请上传jpg,png或gif类型的图片！'; 36 $returnData['code'] = 400; 37 return $returnData; 38 } 39 if ($size > (5000 * 1024)) { 40 $returnData['error'] = '图片大小已超过5000KB'; 41 $returnData['code'] = 400; 42 return $returnData; 43 } 44 $yCode = array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'); 45 $orderSn = $yCode[intval(date('Y')) - 2011] . strtoupper(dechex(date('m'))) . date('d') . substr(time(), -5) . substr(microtime(), 2, 5) . sprintf('%02d', rand(0, 99)); 46 $pic_url = $path . '/' . date('Y-m-d') . $orderSn . '.' .$type; 47 $pic_name = date('Y-m-d') . $orderSn . '.' .$type; 48 if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹 49 $room->room_image = $pic_url; 50 $room->save(false); 51 $returnData['error'] = '0'; 52 $returnData['result'] = $pic_url; 53 $returnData['code'] = 200; 54 } else { 55 $returnData['error'] = '上传有误，清检查服务器配置！'; 56 $returnData['code'] = 400; 57 } 58 return $returnData; 59 } 60 }
注意问题：
上传成功之后没有执行回调函数。
打开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
