Yii2 富头像上传

时间:2024-04-26 13:53:32

前台html:

 <div class="xz_img2 text-center">
<div class="images_flow" id="img_wrap" <?php if(!$model->head_pic){echo "style='display:none'";}else{echo "style='display:block'";}; ?>>
<img src="<?= StringHelper::isNullOrEmpty($model->head_pic)
?
Url::to('@web/uploads/headpic/default.jpg')
:
Url::to('@web/'.$model->head_pic.'1.jpg'. '?v=' . time())?>" alt="" class="img-circle">
<p style="line-height:50px;"><a href="#" id = 'pic'>上传图片</a></p>
</div>
</div>
<div class="container" id="main">
<div class="demo " <?php if($model->head_pic){echo "style='display:none'";}else{echo "style='display:block'";}; ?>>
<p id="swfContainer">
本组件需要安装Flash Player后才可使用,请从<a
href="http://dl.pconline.com.cn/html_2/1/114/id=8122&pn=0.html"
target="_blank">这里</a>下载安装。
</p>
<button type="button" id="upload" style="display:none;margin-top:8px;"> </button>
</div>

前台js :

  swfobject.addDomLoadEvent(function () {
var swf = new fullAvatarEditor("<?=Url::to('@web/assets/flash_upload/')?>fullAvatarEditor.swf", "<?=Url::to('@web/assets/flash_upload/')?>xpressInstall.swf", "swfContainer", {
id: 'swf',
upload_url: '<?=Url::to('upload-pic')?>?userid=<?=$model->id?>&username=<?=$model->name?>&_csrf=<?=Yii::$app->request->getCsrfToken()?>', //上传接口
method: 'post', //传递到上传接口中的查询参数的提交方式。更改该值时,请注意更改上传接口中的查询参数的接收方式
src_upload: 0, //是否上传原图片的选项,有以下值:0-不上传;1-上传;2-显示复选框由用户选择
avatar_box_border_width: 0,
avatar_sizes: '100*100|50*50|30*30',
avatar_sizes_desc: '100*100像素|50*50像素|30*30像素',
tab_visible:true,
browse_button_y:-30,
tab_font_size: 20,
}, function (msg) {
switch (msg.code) {
case 1 :
// alert("页面成功加载了组件!");
break;
case 2 :
//
document.getElementById("upload").style.display = "inline";
break;
case 3 :
if (msg.type == 0) {
alert("摄像头已准备就绪且用户已允许使用。");
}
else if (msg.type == 1) {
alert("摄像头已准备就绪但用户未允许使用!");
}
else {
alert("摄像头被占用!");
}
break;
case 5 :
if (msg.type == 0) {
if (msg.content.sourceUrl) { 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);
}
else {
var user_id = msg.content.userid;
var user_name = msg.content.username;
var url = '/hr/user-info/deal-image'+'?v='+ new Date().getTime();
$.ajax({
url:url,
type:'post',
dataType:'json',
data:{user_id: user_id},
success:function(data){
if(data.success){
$('.demo').hide();
$("#img_wrap").show();
$("#img_wrap img").attr('src','/'+data.url+'1.jpg'+'?v='+ new Date().getTime()); //window.location.reload();
}
}
});
//alert("头像已成功保存至服务器,url为:\n" + msg.content.avatarUrls.join("\n\n") + "\n\n传递的userid=" + msg.content.userid + "&username=" + msg.content.username);
}
}
break;
}
}
);
document.getElementById("upload").onclick = function () {
swf.call("upload");
};
});

后台php:

  /**
* 上传图片
*/
public function actionUploadPic()
{
$result = array();
$result['success'] = false;
$success_num = 0;
$msg = '';
//上传目录
$dir = "uploads/headpic";
//$path = 'uploads/headpic/';
// 取服务器时间+8位随机码作为部分文件名,确保文件名无重复。
$filename = date("YmdHis") . '_' . floor(microtime() * 1000) . '_' . mt_rand(100,999);
// 处理原始图片开始------------------------------------------------------------------------>
//默认的 file 域名称是__source,可在插件配置参数中自定义。参数名:src_field_name
$source_pic = isset($_FILES["__source"]) ? $_FILES["__source"] : '';
//如果在插件中定义可以上传原始图片的话,可在此处理,否则可以忽略。
if ($source_pic) {
if ($source_pic['error'] > 0) {
$msg .= $source_pic['error'];
} else {
//原始图片的文件名,如果是本地或网络图片为原始文件名、如果是摄像头拍照则为 *FromWebcam.jpg
$sourceFileName = $source_pic["name"];
//原始文件的扩展名(不包含“.”)
$sourceExtendName = substr($sourceFileName, strripos($sourceFileName, "."));
//保存路径
$savePath = "$dir/php_source_$filename." . $sourceExtendName;
//当前头像基于原图的初始化参数(只有上传原图时才会发送该数据,且发送的方式为POST),用于修改头像时保证界面的视图跟保存头像时一致,提升用户体验度。
//修改头像时设置默认加载的原图url为当前原图url+该参数即可,可直接附加到原图url中储存,不影响图片呈现。
$init_params = $_POST["__initParams"];
$result['sourceUrl'] = $savePath . $init_params;
move_uploaded_file($source_pic["tmp_name"], $savePath);
$success_num++;
}
}
//<------------------------------------------------------------------------处理原始图片结束
// 处理头像图片开始------------------------------------------------------------------------>
//头像图片(file 域的名称:__avatar1,2,3...)。
$avatars = array("__avatar1", "__avatar2", "__avatar3");
$avatars_length = count($avatars);
$userId = $_POST["userid"]; for ($i = 0; $i < $avatars_length; $i++) {
$avatar = $_FILES[$avatars[$i]];
$avatar_number = $i + 1;
if ($avatar['error'] > 0) {
$msg .= $avatar['error'];
} else {
$path = 'uploads/headpic/' . $userId;
if(!file_exists($path)){
mkdir($path, 0777);
chmod($path, 0777);
}
$savePath = "$path/".'face'.$_POST["userid"].'_'. $avatar_number.".jpg";
$result['avatarUrls'][$i] = $savePath;
move_uploaded_file($avatar["tmp_name"], $savePath);
$success_num++;
}
}
//<------------------------------------------------------------------------处理头像图片结束
//upload_url中传递的额外的参数,如果定义的method为get请换为$_GET
$result["userid"] = $_POST["userid"];
$result["username"] = $_POST["username"]; $result['msg'] = $msg;
if ($success_num > 0) {
$result['success'] = true;
}
//返回图片的保存结果(返回内容为json字符串)
print json_encode($result);
}

注意问题:

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