100 lines
3.4 KiB
JavaScript
100 lines
3.4 KiB
JavaScript
// 图片预览功能
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// 注册页面的学生证照片预览
|
|
const studentIdInput = document.getElementById('student_id_photo');
|
|
if (studentIdInput) {
|
|
studentIdInput.addEventListener('change', function (e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
const preview = document.getElementById('imagePreview');
|
|
if (preview) {
|
|
preview.src = e.target.result;
|
|
preview.style.display = 'block';
|
|
document.querySelector('#fileUploadArea .file-upload-text').style.display = 'none';
|
|
}
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 发帖页面的图片预览
|
|
const postImageInput = document.getElementById('image');
|
|
if (postImageInput) {
|
|
postImageInput.addEventListener('change', function (e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
const preview = document.getElementById('postImagePreview');
|
|
if (preview) {
|
|
preview.src = e.target.result;
|
|
preview.style.display = 'block';
|
|
document.querySelector('#postImageUploadArea .file-upload-text').style.display = 'none';
|
|
}
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Flash消息自动关闭
|
|
const flashMessages = document.querySelectorAll('.flash');
|
|
flashMessages.forEach(function (flash) {
|
|
setTimeout(function () {
|
|
flash.style.animation = 'slideOut 0.3s ease';
|
|
setTimeout(function () {
|
|
flash.remove();
|
|
}, 300);
|
|
}, 5000);
|
|
});
|
|
|
|
// 拖拽上传功能
|
|
const uploadAreas = document.querySelectorAll('.file-upload-area');
|
|
uploadAreas.forEach(function (area) {
|
|
area.addEventListener('dragover', function (e) {
|
|
e.preventDefault();
|
|
this.style.borderColor = 'var(--primary-color)';
|
|
this.style.background = 'rgba(99, 102, 241, 0.1)';
|
|
});
|
|
|
|
area.addEventListener('dragleave', function (e) {
|
|
e.preventDefault();
|
|
this.style.borderColor = 'var(--border-color)';
|
|
this.style.background = 'transparent';
|
|
});
|
|
|
|
area.addEventListener('drop', function (e) {
|
|
e.preventDefault();
|
|
this.style.borderColor = 'var(--border-color)';
|
|
this.style.background = 'transparent';
|
|
|
|
const fileInput = this.querySelector('.file-input');
|
|
if (fileInput && e.dataTransfer.files.length) {
|
|
fileInput.files = e.dataTransfer.files;
|
|
// 触发change事件
|
|
const event = new Event('change');
|
|
fileInput.dispatchEvent(event);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// slideOut 动画
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
@keyframes slideOut {
|
|
from {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|