118 lines
4.9 KiB
JavaScript
118 lines
4.9 KiB
JavaScript
const put_button = document.querySelector("#files3d");
|
||
const drop_zone = document.querySelectorAll('#drop-zone');
|
||
const maxFileSize = 1200000; // максимальный размер фалйа - 1 мб.
|
||
const upload_buttons = document.querySelectorAll(".files");
|
||
const thumb_gallery_container = document.querySelector(".thumb-gallery .itc-slider-items");
|
||
const button_prev = document.querySelector(".itc-slider-btn-prev");
|
||
const button_next = document.querySelector(".itc-slider-btn-next");
|
||
var photos_array = [];
|
||
// Проверка поддержки браузером
|
||
if (typeof(window.FileReader) == 'undefined') {
|
||
drop_zone.lastElementChild.innerHTML ='Не поддерживается браузером!';
|
||
}
|
||
for (var i = 0; i < upload_buttons.length; i++){
|
||
drop_zone[i].addEventListener("dragover", function(e){
|
||
e.preventDefault();
|
||
return false;
|
||
});
|
||
drop_zone[i].addEventListener("drop", function(e){
|
||
e.preventDefault();
|
||
console.log(this.parentElement.lastElementChild.id);
|
||
this.parentElement.lastElementChild.files = e.dataTransfer.files;
|
||
addImage(e, this);
|
||
loadDropZone(e, this);
|
||
});
|
||
}
|
||
//Есть второй обработчик для files в goods_change.js
|
||
for (var i = 0; i < upload_buttons.length; i++){
|
||
// кнопка загрузки картинок
|
||
upload_buttons[i].addEventListener("change", function(e){
|
||
addImage(e, this);
|
||
loadDropZone(e, this.parentElement.firstElementChild);
|
||
});
|
||
}
|
||
function loadDropZone(e, obj, icon){
|
||
if(e.dataTransfer){
|
||
var file = e.dataTransfer.files;
|
||
}
|
||
else{
|
||
var file = document.getElementById("files").files;
|
||
}
|
||
// Проверяем размер файла
|
||
if (file.size > maxFileSize) {
|
||
obj.lastElementChild.innerHTML ='Файл слишком большой!';
|
||
return false;
|
||
}
|
||
obj.parentElement.querySelector('.progress div').parentElement.style.display = "block";
|
||
obj.firstElementChild.style.display = "none";
|
||
obj.parentElement.querySelector('.drop-zone-text').style.visibility = "hidden";
|
||
|
||
var formData = new FormData();
|
||
formData.append("files[]", file);
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.upload.addEventListener('progress', function(e){uploadProgress(e, obj)}, false);
|
||
xhr.onreadystatechange = function(e){stateChange(e, obj)};
|
||
xhr.open('POST', 'drop.php');
|
||
xhr.send(formData);
|
||
}
|
||
// Показываем процент загрузки
|
||
function uploadProgress(e, obj) {
|
||
var percent = parseInt(e.loaded / e.total * 100);
|
||
obj.parentElement.querySelector('.progress div').style.width = percent + '%';
|
||
}
|
||
|
||
function stateChange(e, obj) {
|
||
if (e.target.readyState == 4) {
|
||
if (e.target.status == 200) {
|
||
obj.parentElement.querySelector('.progress div').parentElement.style.display = "none";
|
||
obj.firstElementChild.style.display = "block";
|
||
obj.parentElement.querySelector('.drop-zone-text').style.visibility = "visible";
|
||
} else {
|
||
obj.lastElementChild.innerHTML ='Произошла ошибка!';
|
||
}
|
||
}
|
||
}
|
||
function addField(obj) {
|
||
for(var i = 0; i < 2; i++){
|
||
var field = document.createElement("input");
|
||
field.classList.add("design-fields");
|
||
obj.previousElementSibling.appendChild(field);
|
||
}
|
||
}
|
||
function addImage(e, obj){
|
||
if(e.dataTransfer){
|
||
var files = event.dataTransfer.files;
|
||
}
|
||
else{
|
||
var files = obj.files;
|
||
}
|
||
|
||
var files_array = Array.from(files);
|
||
var totalfiles = files.length;
|
||
if(totalfiles > 0 ){
|
||
for (var index = 0; index < totalfiles; index++) {
|
||
var icon_container = document.createElement("div");
|
||
icon_container.classList.add("itc-slider-item");
|
||
thumb_gallery_container.appendChild(icon_container);
|
||
var icon = document.createElement("div");
|
||
icon.classList.add("thumb-gallery-item", "thumb-gallery-temp-item");
|
||
icon.id = Date.now() + index;
|
||
|
||
photos_array[icon.id] = files_array[index];
|
||
|
||
icon.style.backgroundImage = "url(" + URL.createObjectURL(files[index]) + ")";
|
||
icon_container.appendChild(icon);
|
||
var close_button = document.createElement("div");
|
||
close_button.classList.add("close-button");
|
||
icon.appendChild(close_button);
|
||
close_button.addEventListener("click", function(){
|
||
delete photos_array[this.parentElement.id];
|
||
this.parentElement.remove();
|
||
});
|
||
}
|
||
}
|
||
button_prev.style.display = "block";
|
||
button_next.style.display = "block";
|
||
ItcSlider.getOrCreateInstance('.thumb-gallery');
|
||
button_prev.click();
|
||
} |