imagecropper php,cropper+php+ajax实现上传头像

这篇文章主要介绍了关于cropper+php+ajax实现上传头像，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下前端代码

上传头像

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%;

}

打开

×

更换头像

未选择图片

---

150*150:

100*100:

30*30:

打开图片

提交

取消

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'));

});

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中文网！

相关推荐：

php实现socket推送技术

对象转换成JSON字符串