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中文网！
相关推荐：
php实现socket推送技术
对象转换成JSON字符串
以上就是cropper+php+ajax实现上传头像的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是为您收集整理的cropper+php+ajax实现上传头像全部内容，希望文章能够帮你解决cropper+php+ajax实现上传头像所遇到的程序开发问题。 如果觉得技术教程内容还不错，欢迎将网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
未经允许不得转载：Str Tom工作室 » cropper+php+ajax实现上传头像
