mirror of https://github.com/4xmen/xshop.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.1 KiB
JavaScript
97 lines
3.1 KiB
JavaScript
// var uploadFormData = [];
|
|
|
|
function previewImage(input, i) {
|
|
try {
|
|
var oFReader = new FileReader();
|
|
oFReader.readAsDataURL(input);
|
|
|
|
oFReader.onload = function (oFREvent) {
|
|
let img = oFREvent.target.result;
|
|
$("#uploading-images").append(`<div data-id="${i}" class="col-xl-3 col-md-4 border p-3">
|
|
<div class="img-preview" style="background-image: url('${img}')"></div>
|
|
<div class="btn btn-danger upload-remove-image">
|
|
<span class="fa fa-trash"></span>
|
|
</div>
|
|
</div>`);
|
|
};
|
|
if (xTimer != undefined){
|
|
clearTimeout(xTimer);
|
|
}
|
|
var xTimer = setTimeout(function () {
|
|
$('.img-preview').css('height',$('.img-preview').width()+'px');
|
|
$(window).resize();
|
|
}, 300);
|
|
} catch (e) {
|
|
}
|
|
|
|
};
|
|
jQuery(function () {
|
|
|
|
$("#uploading-images .image-index").bind('dblclick',function () {
|
|
$('.indexed').removeClass('indexed');
|
|
$(this).addClass('indexed');
|
|
$("#indexImage").val($(this).data('key'));
|
|
})
|
|
$('.img-preview').height($('.img-preview').width());
|
|
|
|
$("#upload-drag-drop").off('click').bind('click',function () {
|
|
|
|
$("#upload-image-select").off('click').click();
|
|
});
|
|
$("#upload-image-select").off('change').bind('change', function () {
|
|
for (const i in $(this)[0].files) {
|
|
var file = $(this)[0].files[i];
|
|
uploadFormData.push(file);
|
|
previewImage(file, uploadFormData.length);
|
|
}
|
|
});
|
|
$(document).on('click',".upload-remove-image",function () {
|
|
var data = $(this).closest('.col-md-4').data('id');
|
|
delete uploadFormData[data-1];
|
|
$(this).closest('.col-md-4').slideUp(400, function () {
|
|
$(this).remove();
|
|
});
|
|
});
|
|
|
|
$('#upload-drag-drop').off('dragover').on(
|
|
'dragover',
|
|
function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
$(this).addClass(".active");
|
|
}
|
|
);
|
|
$('#upload-drag-drop').off('dragenter').off('dragstart').on(
|
|
'dragenter dragstart',
|
|
function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
$(this).addClass("active");
|
|
}
|
|
);
|
|
$('#upload-drag-drop').off('dragend').off('ondragleave').bind(
|
|
'ondragleave dragend',
|
|
function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
$(this).removeClass("active");
|
|
}
|
|
);
|
|
|
|
$('#upload-drag-drop').off('drop').on(
|
|
'drop',
|
|
function(e){
|
|
$(this).removeClass("active");
|
|
if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
/*UPLOAD FILES HERE*/
|
|
for( const f of e.originalEvent.dataTransfer.files) {
|
|
previewImage(f, uploadFormData.length);
|
|
}
|
|
|
|
}
|
|
}
|
|
);
|
|
});
|