Код: Выделить всё
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="~/Content/cropper.css">
</head>
<body>
<a href="#" data-btn="add-image">Добавить</a>
<input type="file" class="hidden" id="add-image-input" accept="image/*">
<div class="modal fade" tabindex="-1" role="dialog" id="cropModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">×</span></button>
<p>Выберите область для превью-изображения. Оригинальное изображение обрезано не будет.</p>
</div>
<div class="modal-body">
<div style="margin:20px auto; max-width:640px;">
<img id="cropImage" src="#" style="max-width:100%;margin-top:12px;width:100%;">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal" id="cropSave">Сохранить</button>
</div>
</div>
</div>
</div>
<script src="~/Scripts/cropper.js"></script>
<script>
$(document).on('click', '[data-btn=add-image]', function (e) {
e.preventDefault();
if ($('.form-photos-list').find('.form-photos-image').length < 6) {
$('#add-image-input').click();
} else {
alert("Всего возможно загрузить шесть фотографий на лот.");
}
}).on('change', '#add-image-input', function (e) {
// if (cropper) { cropper.destroy(); }
e.preventDefault();
var reader = new FileReader();
reader.onload = function (e) {
$('#cropModal').modal();
$('#cropImage').attr('src', e.target.result);
};
reader.readAsDataURL(this.files[0]);
})
$('#cropModal').on('shown.bs.modal', function (e) {
var image = document.getElementById('cropImage');
cropper = new Cropper(image, {
aspectRatio: 268 / 249,
dragMode: 'none',
autoCropArea: 1,
movable: false,
rotatable: false,
scalable: false,
zoomable: false,
background: false,
viewMode: 3
//cropBoxResizable: false
});
});
</script>