公司还是用的phpcms系统,头像上传还是用的flash,导致大部分浏览器都无法用了,只能升级了。
用的cropper.js
核心代码如下:
- <img id="image" src="statics/cropper/default-avatar.png">
- <div style = "margin: 5px 0;">
- <img src = "{$avatar[180]}" id = "cropImg" style = "width:100px;height:100px; background: #f2f2f2;"/>
- </div>
- <div>
- <input type="file" onchange="selectImage(this);"/>
- <button onclick="save()">保存头像</button>
- </div>
- <script>
- var selectImg = false;
- var cropper = new Cropper($('#image')[0], { // 初始化cropper
- aspectRatio: 1/1, // 裁剪比例是1:1正方形
- });
- function save() {
- if(!selectImg) {
- layer.msg('请先选择图片');
- return false;
- }
- let data = cropper.getCroppedCanvas().toDataURL('image/jpeg'); // 点保存按钮,把裁剪的图片显示在预览窗口
- $('#cropImg').attr('src', data);
- cropper.getCroppedCanvas().toBlob((blob) => { // 生成blob上传
- const formData = new FormData();
- formData.append('avatar', blob , 'avatar.jpg');
- $.ajax('上传地址', {
- type: 'POST',
- data: formData,
- processData: false,
- contentType: false, // false就是自动判断类型
- success() {
- layer.msg('头像上传成功');
- },
- error(res) {
- layer.msg('错误');
- },
- });
- }, 'image/jpeg');
- }
- function selectImage(file) {
- selectImg = true;
- if (!file.files || !file.files[0]) {
- return;
- }
- var reader = new FileReader();
- reader.onload = function (evt) {
- $('#image').attr('src', evt.target.result);
- cropper.replace(evt.target.result, false); // 重新选择图片,必须用这个
- }
- reader.readAsDataURL(file.files[0]);
- }
- </script>
复制代码
几点注意下:
formData对象可以直接添加文件数据,并且不需要设置contentType类型;
重新选择图片,必须用cropper.replace方法设置新图片,否则图片不会变;
完事。
有关PHP系统、Discuz或网站等各种问题,可以联系QQ1069971363寻求付费支持
|