前端实例
<!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">
.user-photo {
width: 500px;
height: 104px;
margin-top: 10px;
}
#photo {
max-width: 100%;
max-height: 350px;
}
.img-preview-box {
text-align: center;
}
.img-preview-box>div {
display: inline-block;
;
margin-right: 10px;
}
.img-preview {
overflow: hidden;
}
</style>
</head>
<body>
<!-- <button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">打开</button> -->
<!-- <button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">打开</button> -->
<br />
<div class="user-photo-box">
<img class="user-photo" style="width: 104px;height: 104px" src="" data-target="#changeModal" data-toggle="modal">
</div>
<div class="user-photo-box">
<img class="user-photo" src="" data-target="#changeModal" data-toggle="modal">
</div>
<div class="user-photo-box">
<img class="user-photo" src="" data-target="#changeModal" data-toggle="modal">
</div>
<!-- 弹窗 -->
<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div 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>
</div>
<div class="modal-body">
<p class="tip-info text-center">
未选择图片
</p>
<div class="img-container hidden">
<img src="" alt="" id="photo">
</div>
</div>
<div 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>
</div>
</div>
</div>
</div>
<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 currentImg = null;
var currentHeiht = 104;
var currentWidth = 104;
// 原始文件对象
var oldFile = null;
var initCropperInModal = function (img, input, modal) {
var $image = img;
var $inputImage = input;
var $modal = modal;
var ratio = currentWidth/currentHeiht;
var options = {
aspectRatio: ratio, // 纵横比
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) {
oldFile = file = files[0];
// 原始图片的file对象
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 () {
var $tar = $(currentImg);
$('#photo').cropper('getCroppedCanvas', {
width: currentWidth,
height: currentHeiht
}).toBlob(function (blob) {
// 转化为blob后更改src属性更新图片，隐藏模态框
$tar.attr('src', URL.createObjectURL(blob));
$('#changeModal').modal('hide');
console.log('blob', blob)
var uploadUrl = '';
// blob对象转文件对象
let file = new window.File([blob], oldFile.name, {
type: oldFile.type
})
var oMyForm = new FormData(); // 创建一个空的FormData对象
oMyForm.append("file", file); // append()方法添加字段
$.ajax({
url: uploadUrl,
type: 'POST',
cache: false,
data: oMyForm,
processData: false,
contentType: false,
success: function (res) {
console.log('res', res)
}
})
});
}
$(function () {
$(".user-photo").click(function(){
currentImg = this;
currentHeiht = 104;
currentWidth = 104;
})
initCropperInModal($('#photo'), $('#photoInput'), $('#changeModal'));
console.log($('.uploadImg').eq(0))
});
</script>
</body>
</html>
复制代码