89 lines
2.4 KiB
JavaScript
89 lines
2.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
||
const imageInput = document.getElementById('image-input');
|
||
const imagePreview = document.getElementById('image-preview');
|
||
const uploadArea = document.getElementById('image-upload-area');
|
||
|
||
imageInput.addEventListener('change', function (e) {
|
||
updatePreview();
|
||
});
|
||
|
||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||
uploadArea.addEventListener(eventName, preventDefaults, false);
|
||
});
|
||
|
||
function preventDefaults(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
|
||
['dragenter', 'dragover'].forEach(eventName => {
|
||
uploadArea.addEventListener(eventName, highlight, false);
|
||
});
|
||
|
||
['dragleave', 'drop'].forEach(eventName => {
|
||
uploadArea.addEventListener(eventName, unhighlight, false);
|
||
});
|
||
|
||
function highlight() {
|
||
uploadArea.style.borderColor = '#007bff';
|
||
uploadArea.style.background = '#f8f9fa';
|
||
}
|
||
|
||
function unhighlight() {
|
||
uploadArea.style.borderColor = '#ccc';
|
||
uploadArea.style.background = '';
|
||
}
|
||
|
||
uploadArea.addEventListener('drop', handleDrop, false);
|
||
|
||
function handleDrop(e) {
|
||
const dt = e.dataTransfer;
|
||
const files = dt.files;
|
||
imageInput.files = files;
|
||
updatePreview();
|
||
}
|
||
|
||
function updatePreview() {
|
||
imagePreview.innerHTML = '';
|
||
const files = imageInput.files;
|
||
|
||
for (let i = 0; i < files.length; i++) {
|
||
const file = files[i];
|
||
if (!file.type.match('image.*')) continue;
|
||
|
||
const reader = new FileReader();
|
||
|
||
reader.onload = function (e) {
|
||
const previewItem = document.createElement('div');
|
||
previewItem.className = 'preview-item';
|
||
|
||
const img = document.createElement('img');
|
||
img.src = e.target.result;
|
||
|
||
const removeBtn = document.createElement('button');
|
||
removeBtn.className = 'remove-image';
|
||
removeBtn.innerHTML = '×';
|
||
removeBtn.onclick = function () {
|
||
previewItem.remove();
|
||
const dt = new DataTransfer();
|
||
const inputFiles = imageInput.files;
|
||
|
||
for (let j = 0; j < inputFiles.length; j++) {
|
||
if (j !== i) {
|
||
dt.items.add(inputFiles[j]);
|
||
}
|
||
}
|
||
|
||
imageInput.files = dt.files;
|
||
};
|
||
|
||
previewItem.appendChild(img);
|
||
previewItem.appendChild(removeBtn);
|
||
imagePreview.appendChild(previewItem);
|
||
};
|
||
|
||
reader.readAsDataURL(file);
|
||
}
|
||
}
|
||
});
|