cropper+php+ajax实现上传头像

内容导读

收集整理的这篇技术教程文章主要介绍了cropper+php+ajax实现上传头像，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5832字，纯文字阅读大概需要9分钟。

内容图文

这篇文章主要介绍了关于cropper+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: '.img-preview' // 预览图的class名



};



// 模态框隐藏后需要保存的数据对象



var saveData = {};



//var URL = window.URL || window.webkitURL;



var blobURL;



$modal.on('show.bs.modal',function () {





// 如果打开模态框时没有选择文件就点击“打开图片”按钮





if(!$inputImage.val()){







$inputImage.click();





}



}).on('shown.bs.modal', function () {





// 重新创建





$image.cropper( $.extend(options, {







ready: function () {









// 当剪切界面就绪后，恢复数据









if(saveData.canvasData){











$image.cropper('setCanvasData', saveData.canvasData);











$image.cropper('setCropBoxData', saveData.cropBoxData);









}







}





}));



}).on('hidden.bs.modal', function () {





// 保存相关数据





saveData.cropBoxData = $image.cropper('getCropBoxData');





saveData.canvasData = $image.cropper('getCanvasData');





// 销毁并将图片保存在img标签





$image.cropper('destroy').attr('src',blobURL);



});



if (URL) {





$inputImage.change(function() {







var files = this.files;







var file;







if (!$image.data('cropper')) {









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('reset').cropper('replace', blobURL);













// 选择文件后，显示和隐藏相关内容











$('.img-container').removeClass('hidden');











$('.img-preview-box').removeClass('hidden');











$('#changeModal .disabled').removeAttr('disabled').removeClass('disabled');











$('#changeModal .tip-info').addClass('hidden');











} else {











window.alert('请选择一个图像文件！');









}







}





});



} else {





$inputImage.prop('disabled', true).addClass('disabled');



}

}

var sendPhoto = function(){	



 // 得到PNG格式的dataURL				var photo = $('#photo').cropper('getCroppedCanvas', {				width: 300,				height: 300			}).toDataURL('image/png');			$.ajax({				url: 'http://localhost/test/upload.php', // 要上传的地址				type: 'post',				data: {					'imgData': photo				},				dataType: 'json',				success: function (data) {					if (data.status == 0) {						// 将上传的头像的地址填入，为保证不载入缓存加个随机数						$('.user-photo').attr('src', '头像地址?t=' + Math.random());						$('#changeModal').modal('hide');					} else {						alert(data.info);					}				}			});

}

$(function(){



initCropperInModal($('#photo'),$('#photoInput'),$('#changeModal'));

});	</script></body></html>

php 后台处理代码插入数据库根据框架不同，所以不写了。后期补上自动切割不同大小的缩略图

ini_set('date.timezone','Asia/Shanghai');/** * [将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['imgData'];$path="./upload";echo base64_image_content($base64_image_content,$path);function base64_image_content($base64_image_content,$path){

//匹配出图片的格式

if (preg_match('/^(data:s*image/(w+);base64,)/', $base64_image_content, $result)){



$type = $result[2];



$new_file = $path."/".date('Ymd',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], '', $base64_image_content)))){





return '/'.$new_file;



}else{





return false;



}

}else{



return false;

}}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

内容总结

以上是为您收集整理的cropper+php+ajax实现上传头像全部内容，希望文章能够帮你解决cropper+php+ajax实现上传头像所遇到的程序开发问题。如果觉得技术教程内容还不错，欢迎将网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

本文关键词：

特别推荐阅读

cropper+php+ajax实现上传头像

cropper+php+ajax实现上传头像

内容导读

内容图文

内容总结

内容备注

联系我们

cropper+php+ajax实现上传头像

cropper+php+ajax实现上传头像

内容导读

内容图文

内容总结

内容备注

相关文章

联系我们