Cropper+php+ajax는 아바타 업로드를 구현합니다.-PHP 튜토리얼-php.cn

집

백엔드 개발

PHP 튜토리얼

Cropper+php+ajax는 아바타 업로드를 구현합니다.

不言

Jul 07, 2018 pm 01:48 PM

이 글에서는 아바타 업로드를 위한 크롭퍼+php+ajax 구현을 주로 소개합니다. 이제는 모든 사람과 공유합니다. 필요한 친구들이 참고할 수 있습니다

프런트엔드 코드

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>上传头像</title>
<link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
    body{
        text-align: center;
    }
    #user-photo {
        width:300px;
        height:300px;
        margin-top: 10px;
    }
    #photo {
        max-width:100%;
        max-height:350px;
    }
    .img-preview-box {
        text-align: center;
    }
    .img-preview-box > p {
        display: inline-block;;
        margin-right: 10px;
    }
    .img-preview {
        overflow: hidden;
    }
    .img-preview-box .img-preview-lg {
        width: 150px;
        height: 150px;
    }
    .img-preview-box .img-preview-md {
        width: 100px;
        height: 100px;
    }
    .img-preview-box .img-preview-sm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
	
.cropper-view-box, .cropper-face {
    border-radius: 50%;
}
</style>
</head>
<body>
<button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">打开</button><br/>
		<p class="user-photo-box">
			<img id="user-photo" src="">
		</p>
</p>
<p class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
<p class="modal-dialog">
    <p class="modal-content">
        <p class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title text-primary">
            <i class="fa fa-pencil"></i>
                        更换头像
            </h4>
        </p>
        <p class="modal-body">
            <p class="tip-info text-center">
                未选择图片
            </p>
            <p class="img-container hidden">
                <img src="" alt="" id="photo">
            </p>
            <p class="img-preview-box hidden">
                <hr>
                <span>150*150:</span>
                <p class="img-preview img-preview-lg">
                </p>
                <span>100*100:</span>
                <p class="img-preview img-preview-md">
                </p>
                <span>30*30:</span>
                <p class="img-preview img-preview-sm">
                </p>
            </p>
        </p>
        <p class="modal-footer">
            <label class="btn btn-danger pull-left" for="photoInput">
            <input type="file" class="sr-only" id="photoInput" accept="image/*">
            <span>打开图片</span>
            </label>
            <button class="btn btn-primary disabled" disabled="true" onclick="sendPhoto();">提交</button>
            <button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button>
        </p>
    </p>
</p>
</p>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">


    var initCropperInModal = function(img, input, modal){
        var $image = img;
        var $inputImage = input;
        var $modal = modal;
        var options = {
            aspectRatio: 1, // 纵横比
            viewMode: 2,
            preview: &#39;.img-preview&#39; // 预览图的class名
        };
        // 模态框隐藏后需要保存的数据对象
        var saveData = {};
        //var URL = window.URL || window.webkitURL;
        var blobURL;
        $modal.on(&#39;show.bs.modal&#39;,function () {
            // 如果打开模态框时没有选择文件就点击“打开图片”按钮
            if(!$inputImage.val()){
                $inputImage.click();
            }
        }).on(&#39;shown.bs.modal&#39;, function () {
            // 重新创建
            $image.cropper( $.extend(options, {
                ready: function () {
                    // 当剪切界面就绪后，恢复数据
                    if(saveData.canvasData){
                        $image.cropper(&#39;setCanvasData&#39;, saveData.canvasData);
                        $image.cropper(&#39;setCropBoxData&#39;, saveData.cropBoxData);
                    }
                }
            }));
        }).on(&#39;hidden.bs.modal&#39;, function () {
            // 保存相关数据
            saveData.cropBoxData = $image.cropper(&#39;getCropBoxData&#39;);
            saveData.canvasData = $image.cropper(&#39;getCanvasData&#39;);
            // 销毁并将图片保存在img标签
            $image.cropper(&#39;destroy&#39;).attr(&#39;src&#39;,blobURL);
        });
        if (URL) {
            $inputImage.change(function() {
                var files = this.files;
                var file;
                if (!$image.data(&#39;cropper&#39;)) {
                    return;
                }
                if (files && files.length) {
                    file = files[0];
                    if (/^image\/\w+$/.test(file.type)) {
    
                        if(blobURL) {
                            URL.revokeObjectURL(blobURL);
                        }
                        blobURL = URL.createObjectURL(file);
    
                        // 重置cropper，将图像替换
                        $image.cropper(&#39;reset&#39;).cropper(&#39;replace&#39;, blobURL);
    
                        // 选择文件后，显示和隐藏相关内容
                        $(&#39;.img-container&#39;).removeClass(&#39;hidden&#39;);
                        $(&#39;.img-preview-box&#39;).removeClass(&#39;hidden&#39;);
                        $(&#39;#changeModal .disabled&#39;).removeAttr(&#39;disabled&#39;).removeClass(&#39;disabled&#39;);
                        $(&#39;#changeModal .tip-info&#39;).addClass(&#39;hidden&#39;);
    
                    } else {
                        window.alert(&#39;请选择一个图像文件！&#39;);
                    }
                }
            });
        } else {
            $inputImage.prop(&#39;disabled&#39;, true).addClass(&#39;disabled&#39;);
        }
    }

    var sendPhoto = function(){
	  
       // 得到PNG格式的dataURL
	
			var photo = $(&#39;#photo&#39;).cropper(&#39;getCroppedCanvas&#39;, {
				width: 300,
				height: 300
			}).toDataURL(&#39;image/png&#39;);

			$.ajax({
				url: &#39;http://localhost/test/upload.php&#39;, // 要上传的地址
				type: &#39;post&#39;,
				data: {
					&#39;imgData&#39;: photo
				},
				dataType: &#39;json&#39;,
				success: function (data) {
					if (data.status == 0) {
						// 将上传的头像的地址填入，为保证不载入缓存加个随机数
						$(&#39;.user-photo&#39;).attr(&#39;src&#39;, &#39;头像地址?t=&#39; + Math.random());
						$(&#39;#changeModal&#39;).modal(&#39;hide&#39;);
					} else {
						alert(data.info);
					}
				}
			});
    }

    $(function(){
        initCropperInModal($(&#39;#photo&#39;),$(&#39;#photoInput&#39;),$(&#39;#changeModal&#39;));
    });
	
</script>
</body>
</html>

로그인 후 복사

PHP 백그라운드 처리 코드 데이터베이스에 삽입하는 것은 프레임워크에 따라 다르므로 따로 적지는 않겠습니다. 나중에 추가해서 다양한 크기의 썸네일을 자동으로 자르도록 하겠습니다

ini_set(&#39;date.timezone&#39;,&#39;Asia/Shanghai&#39;);
/**
 * [将Base64图片转换为本地图片并保存]
 * @E-mial wuliqiang_aa@163.com
 * @TIME   2017-04-07
 * @WEB    http://blog.iinu.com.cn
 * @param  [Base64] $base64_image_content [要保存的Base64]
 * @param  [目录] $path [要保存的路径]
 */
$base64_image_content = $_POST[&#39;imgData&#39;];
$path="./upload";
echo base64_image_content($base64_image_content,$path);
function base64_image_content($base64_image_content,$path){
    //匹配出图片的格式
    if (preg_match(&#39;/^(data:\s*image\/(\w+);base64,)/&#39;, $base64_image_content, $result)){
        $type = $result[2];
        $new_file = $path."/".date(&#39;Ymd&#39;,time())."/";
        if(!file_exists($new_file)){
            //检查是否有该文件夹，如果没有就创建，并给予最高权限
            mkdir($new_file, 0700);
        }
        $new_file = $new_file.time().".{$type}";
        if (file_put_contents($new_file, base64_decode(str_replace($result[1], &#39;&#39;, $base64_image_content)))){
            return &#39;/&#39;.$new_file;
        }else{
            return false;
        }
    }else{
        return false;
    }
}

로그인 후 복사

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트!

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7415

Cakephp 튜토리얼

1359

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

Laravel의 플래시 세션 데이터로 작업합니다 Mar 12, 2025 pm 05:08 PM

Laravel은 직관적 인 플래시 방법을 사용하여 임시 세션 데이터 처리를 단순화합니다. 응용 프로그램에 간단한 메시지, 경고 또는 알림을 표시하는 데 적합합니다. 데이터는 기본적으로 후속 요청에만 지속됩니다. $ 요청-

PHP의 컬 : REST API에서 PHP Curl Extension 사용 방법 Mar 14, 2025 am 11:42 AM

PHP 클라이언트 URL (CURL) 확장자는 개발자를위한 강력한 도구이며 원격 서버 및 REST API와의 원활한 상호 작용을 가능하게합니다. PHP CURL은 존경받는 다중 프로모토콜 파일 전송 라이브러리 인 Libcurl을 활용하여 효율적인 execu를 용이하게합니다.

Laravel 테스트에서 단순화 된 HTTP 응답 조롱 Mar 12, 2025 pm 05:09 PM

Laravel은 간결한 HTTP 응답 시뮬레이션 구문을 제공하여 HTTP 상호 작용 테스트를 단순화합니다. 이 접근법은 테스트 시뮬레이션을보다 직관적으로 만들면서 코드 중복성을 크게 줄입니다. 기본 구현은 다양한 응답 유형 단축키를 제공합니다. Illuminate \ support \ Facades \ http를 사용하십시오. http :: 가짜 ([ 'google.com'=> 'Hello World', 'github.com'=> [ 'foo'=> 'bar'], 'forge.laravel.com'=>