Yii2 富頭像上傳

前臺html:

 1 <div class="xz_img2 text-center">  
 2                                     <div class="images_flow" id="img_wrap" <?php if(!$model->head_pic){echo "style='display:none'";}else{echo "style='display:block'";};  ?>>
 3                                         <img src="<?= StringHelper::isNullOrEmpty($model->head_pic)
 4                                                 ?
 5                                                 Url::to('@web/uploads/headpic/default.jpg')
 6                                                 :
 7                                                 Url::to('@web/'.$model->head_pic.'1.jpg'. '?v=' . time())?>" alt="" class="img-circle">
 8                                         <p style="line-height:50px;"><a href="#" id = 'pic'>上傳圖片</a></p>
 9                                     </div>
10                                 </div>
11                                 <div class="container" id="main">
12                                     <div class="demo " <?php if($model->head_pic){echo "style='display:none'";}else{echo "style='display:block'";};  ?>>
13                                         <p id="swfContainer">
14                                             本組件須要安裝Flash Player後纔可以使用，請從<a
15                                                 href="http://dl.pconline.com.cn/html_2/1/114/id=8122&pn=0.html"
16                                                 target="_blank">這裏</a>下載安裝。
17                                         </p>
18                                         <button type="button" id="upload" style="display:none;margin-top:8px;">
19                                             
20                                         </button>
21                                     </div>

前臺js :

 1  swfobject.addDomLoadEvent(function () {
 2         var swf = new fullAvatarEditor("<?=Url::to('@web/assets/flash_upload/')?>fullAvatarEditor.swf", "<?=Url::to('@web/assets/flash_upload/')?>xpressInstall.swf", "swfContainer", {
 3                 id: 'swf',
 4                 upload_url: '<?=Url::to('upload-pic')?>?userid=<?=$model->id?>&username=<?=$model->name?>&_csrf=<?=Yii::$app->request->getCsrfToken()?>', //上傳接口
 5                 method: 'post', //傳遞到上傳接口中的查詢參數的提交方式。更改該值時，請注意更改上傳接口中的查詢參數的接收方式
 6                 src_upload: 0, //是否上傳原圖片的選項，有如下值：0-不上傳；1-上傳；2-顯示覆選框由用戶選擇
 7                 avatar_box_border_width: 0,
 8                 avatar_sizes: '100*100|50*50|30*30',
 9                 avatar_sizes_desc: '100*100像素|50*50像素|30*30像素',
10                 tab_visible:true,
11                 browse_button_y:-30,
12                 tab_font_size: 20,        
13             }, function (msg) {
14                 switch (msg.code) {
15                     case 1 :
16 //                            alert("頁面成功加載了組件！");
17                         break;
18                     case 2 :
19 //
20                         document.getElementById("upload").style.display = "inline";
21                         break;
22                     case 3 :
23                         if (msg.type == 0) {
24                             alert("攝像頭已準備就緒且用戶已容許使用。");
25                         }
26                         else if (msg.type == 1) {
27                             alert("攝像頭已準備就緒但用戶未容許使用！");
28                         }
29                         else {
30                             alert("攝像頭被佔用！");
31                         }
32                         break;
33                     case 5 :
34                         if (msg.type == 0) {
35                             if (msg.content.sourceUrl) {
36                                
37                                 alert("原圖已成功保存至服務器，url爲：\n" + 　msg.content.sourceUrl + "\n\n" + "頭像已成功保存至服務器，url爲：\n" + msg.content.avatarUrls.join("\n\n") + "\n\n傳遞的userid=" + msg.content.userid + "&username=" + msg.content.username);
38                             }
39                             else {
40                                 var user_id = msg.content.userid;
41                                 var user_name = msg.content.username;
42                                 var url =  '/hr/user-info/deal-image'+'?v='+ new Date().getTime();
43                                 $.ajax({
44                                     url:url,
45                                     type:'post',
46                                     dataType:'json',
47                                     data:{user_id: user_id}, 
48                                     success:function(data){
49                                         if(data.success){
50                                             $('.demo').hide();
51                                             $("#img_wrap").show();
52                                             $("#img_wrap img").attr('src','/'+data.url+'1.jpg'+'?v='+ new Date().getTime());
53 
54 
55                                             //window.location.reload();
56                                         }
57                                     }
58                                 });
59                                 //alert("頭像已成功保存至服務器，url爲：\n" + msg.content.avatarUrls.join("\n\n") + "\n\n傳遞的userid=" + msg.content.userid + "&username=" + msg.content.username);
60                             }
61                         }
62                         break;
63                 }
64             }
65         );
66         document.getElementById("upload").onclick = function () {
67             swf.call("upload");
68         };
69     });

 

後臺php:

 1  /**
 2      * 上傳圖片
 3      */
 4     public function actionUploadPic()
 5     {
 6         $result = array();
 7         $result['success'] = false;
 8         $success_num = 0;
 9         $msg = '';
10         //上傳目錄
11         $dir = "uploads/headpic";
12         //$path = 'uploads/headpic/';
13         // 取服務器時間+8位隨機碼做爲部分文件名，確保文件名無重複。
14         $filename = date("YmdHis") . '_' . floor(microtime() * 1000) . '_' . mt_rand(100,999);
15         // 處理原始圖片開始------------------------------------------------------------------------>
16         //默認的 file 域名稱是__source，可在插件配置參數中自定義。參數名：src_field_name
17         $source_pic = isset($_FILES["__source"]) ? $_FILES["__source"] : '';
18         //若是在插件中定義能夠上傳原始圖片的話，可在此處理，不然能夠忽略。
19         if ($source_pic) {
20             if ($source_pic['error'] > 0) {
21                 $msg .= $source_pic['error'];
22             } else {
23                 //原始圖片的文件名，若是是本地或網絡圖片爲原始文件名、若是是攝像頭拍照則爲 *FromWebcam.jpg
24                 $sourceFileName = $source_pic["name"];
25                 //原始文件的擴展名(不包含「.」)
26                 $sourceExtendName = substr($sourceFileName, strripos($sourceFileName, "."));
27                 //保存路徑
28                 $savePath = "$dir/php_source_$filename." . $sourceExtendName;
29                 //當前頭像基於原圖的初始化參數（只有上傳原圖時纔會發送該數據，且發送的方式爲POST），用於修改頭像時保證界面的視圖跟保存頭像時一致，提高用戶體驗度。
30                 //修改頭像時設置默認加載的原圖url爲當前原圖url+該參數便可，可直接附加到原圖url中儲存，不影響圖片呈現。
31                 $init_params = $_POST["__initParams"];
32                 $result['sourceUrl'] = $savePath . $init_params;
33                 move_uploaded_file($source_pic["tmp_name"], $savePath);
34                 $success_num++;
35             }
36         }
37         //<------------------------------------------------------------------------處理原始圖片結束
38         // 處理頭像圖片開始------------------------------------------------------------------------>
39         //頭像圖片(file 域的名稱：__avatar1,2,3...)。
40         $avatars = array("__avatar1", "__avatar2", "__avatar3");
41         $avatars_length = count($avatars);
42         $userId = $_POST["userid"];
43         
44         for ($i = 0; $i < $avatars_length; $i++) {
45             $avatar = $_FILES[$avatars[$i]];
46             $avatar_number = $i + 1;
47             if ($avatar['error'] > 0) {
48                 $msg .= $avatar['error'];
49             } else {
50                 $path = 'uploads/headpic/' . $userId;
51                 if(!file_exists($path)){
52                     mkdir($path, 0777);
53                     chmod($path, 0777);
54                 }
55                 $savePath = "$path/".'face'.$_POST["userid"].'_'. $avatar_number.".jpg";
56                 $result['avatarUrls'][$i] = $savePath;
57                 move_uploaded_file($avatar["tmp_name"], $savePath);
58                 $success_num++;
59             }
60         }
61         //<------------------------------------------------------------------------處理頭像圖片結束
62         //upload_url中傳遞的額外的參數，若是定義的method爲get請換爲$_GET
63         $result["userid"] = $_POST["userid"];
64         $result["username"] = $_POST["username"];
65 
66         $result['msg'] = $msg;
67         if ($success_num > 0) {
68             $result['success'] = true;
69         }
70         //返回圖片的保存結果（返回內容爲json字符串）
71         print json_encode($result);
72     }

注意問題：

 upload_url: '<?=Url::to('upload-pic')?>?userid=<?=$model->id?>&username=<?=$model->name?>&_csrf=<?=Yii::$app->request->getCsrfToken()?>', //上傳接口中的參數 加上_csrf = <?=Yii::$app->request->getCsrfToken()?>