JSP图片上传与管理实例

</p><p></div></p><p><div class="b1cfd8bc64d93e29 id grid-cols-2 gap-4 text-sm" <div></p><p><label class="d8bc64d93e29b927 block text-gray-700 mb-1"上传时间</label></p><p><p id="detailUploadTime" class="cedf8aa1da66c322 text-gray-900 font-medium"</p><p></div></p><p><div></p><p><label class="8aa1da66c32257de text-gray-700 mb-1"文件大小</label></p><p><p id="detailFileSize" class="da66c32257de15a7 text-gray-900 font-medium"></p><p></div></p><p></div></p><p></div></p><p></div></p><p></div></p><p><div class="c32257de15a7fe87 justify-end gap-3 mt-6 pt-6 border-t border-gray-200" <button id="eImage"="-6 py-3 bg-red-600 text-white rounded-lg font-semibold hover:bg-red-700 transition-colors" <i class="57de15a7fe8798ec fas fa-trash mr-2"</i>删除图片</p><p></button></p><p><button id="saveDetails"="-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors" <i class="15a7fe8798ec789a fas fa-save mr-2"</i>保存更改</p><p></button></p><p></div></p><p></div></p><p></div></p><p></div></p><p><script></p><p>// 图片数据管理</p><p>class ImageManager {</p><p>constructor() {</p><p>this.images = JSON.parse(localStorage.getItem('images')) || [];</p><p>this.currentView = 'grid';</p><p>}</p><p>addImage(file, name, description) {</p><p>const image = {</p><p>id: Date.now().toString(),</p><p>name: name || file.name,</p><p>description: description || '',</p><p>url: URL.createObjectURL(file),</p><p>uploadTime: new Date().toLocaleString(),</p><p>fileSize: this.formatFileSize(file.size),</p><p>originalFile: file</p><p>};</p><p>this.images.unshift(image);</p><p>this.saveToStorage();</p><p>return image;</p><p>}</p><p>deleteImage(id) {</p><p>this.images = this.images.filter(img => {</p><p>if (img.id === id) {</p><p>URL.revokeObjectURL(img.url);</p><p>return false;</p><p>}</p><p>return true;</p><p>});</p><p>this.saveToStorage();</p><p>}</p><p>updateImage(id, updates) {</p><p>const image = this.images.find(img => img.id === id);</p><p>if (image) {</p><p>Object.assign(image, updates);</p><p>this.saveToStorage();</p><p>}</p><p>}</p><p>searchImages(query) {</p><p>return this.images.filter(img =></p><p>img.name.toLowerCase().includes(query.toLowerCase()) ||</p><p>img.description.toLowerCase().includes(query.toLowerCase())</p><p>);</p><p>}</p><p>sortImages(criteria) {</p><p>switch (criteria) {</p><p>case 'newest':</p><p>return [...this.images].sort((a, b) => b.id - a.id);</p><p>case 'oldest':</p><p>return [...this.images].sort((a, b) => a.id - b.id);</p><p>case 'name':</p><p>return [...this.images].sort((a, b) => a.name.localeCompare(b.name));</p><p>default:</p><p>return this.images;</p><p>}</p><p>}</p><p>saveToStorage() {</p><p>localStorage.setItem('images', JSON.stringify(this.images));</p><p>}</p><p>formatFileSize(bytes) {</p><p>if (bytes === 0) return '0 Bytes';</p><p>const k = 1024;</p><p>const sizes = ['Bytes', 'KB', 'MB', 'GB'];</p><p>const i = Math.floor(Math.log(bytes) / Math.log(k));</p><p>return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];</p><p>}</p><p>}</p><p>// UI控制器</p><p>class UIController {</p><p>constructor() {</p><p>this.imageManager = new ImageManager();</p><p>this.selectedFiles = [];</p><p>this.init();</p><p>}</p><p>init() {</p><p>this.bindEvents();</p><p>this.renderImages();</p><p>}</p><p>bindEvents() {</p><p>// 上传按钮事件</p><p>document.getElementById('uploadBtn').addEventListener('click', () => this.showUploadModal());</p><p>document.getElementById('firstUploadBtn').addEventListener('click', () => this.showUploadModal());</p><p>// 模态框关闭事件</p><p>document.getElementById('closeModal').addEventListener('click', () => this.hideUploadModal());</p><p>document.getElementById('closeDetail').addEventListener('click', () => this.hideDetailModal());</p><p>document.getElementById('cancelUpload').addEventListener('click', () => this.hideUploadModal());</p><p>// 文件选择事件</p><p>document.getElementById('fileInput').addEventListener('change', (e) => this.handleFileSelect(e));</p><p>document.getElementById('uploadArea').addEventListener('click', () => document.getElementById('fileInput').click());</p><p>// 拖放事件</p><p>this.setupDragAndDrop();</p><p>// 搜索和排序事件</p><p>document.getElementById('searchInput').addEventListener('input', (e) => this.handleSearch(e.target.value));</p><p>document.getElementById('sortSelect').addEventListener('change', (e) => this.handleSort(e.target.value));</p><p>document.getElementById('viewSelect').addEventListener('change', (e) => this.handleViewChange(e.target.value));</p><p>// 确认上传事件</p><p>document.getElementById('confirmUpload').addEventListener('click', () => this.handleUpload());</p><p>// 点击外部关闭模态框</p><p>document.getElementById('uploadModal').addEventListener('click', (e) => {</p><p>if (e.target === e.currentTarget) this.hideUploadModal();</p><p>});</p><p>document.getElementById('detailModal').addEventListener('click', (e) => {</p><p>if (e.target === e.currentTarget) this.hideDetailModal();</p><p>});</p><p>}</p><p>setupDragAndDrop() {</p><p>const uploadArea = document.getElementById('uploadArea');</p><p>['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {</p><p>uploadArea.addEventListener(eventName, this.preventDefaults, false);</p><p>});</p><p>['dragenter', 'dragover'].forEach(eventName => {</p><p>uploadArea.addEventListener(eventName, () => this.highlightArea(), false);</p><p>});</p><p>['dragleave', 'drop'].forEach(eventName => {</p><p>uploadArea.addEventListener(eventName, () => this.unhighlightArea(), false);</p><p>});</p><p>uploadArea.addEventListener('drop', (e) => this.handleDrop(e), false);</p><p>}</p><p>preventDefaults(e) {</p><p>e.preventDefault();</p><p>e.stopPropagation();</p><p>}</p><p>highlightArea() {</p><p>document.getElementById('uploadArea').classList.add('dragover');</p><p>}</p><p>unhighlightArea() {</p><p>document.getElementById('uploadArea').classList.remove('dragover');</p><p>}</p><p>handleDrop(e) {</p><p>const dt = e.dataTransfer;</p><p>const files = dt.files;</p><p>this.handleFiles(files);</p><p>}</p><p>handleFileSelect(e) {</p><p>this.handleFiles(e.target.files);</p><p>}</p><p>handleFiles(files) {</p><p>this.selectedFiles = Array.from(files);</p><p>this.showPreviews();</p><p>}</p><p>showPreviews() {</p><p>const previewContainer = document.getElementById('previewContainer');</p><p>const imagePreviews = document.getElementById('imagePreviews');</p><p>imagePreviews.innerHTML = '';</p><p>this.selectedFiles.forEach((file, index) => {</p><p>if (!file.type.startsWith('image/')) return;</p><p>const reader = new FileReader();</p><p>reader.onload = (e) => {</p><p>const previewDiv = document.createElement('div');</p><p>previewDiv.className = 'bg-gray-50 rounded-lg p-3';</p><p>previewDiv.innerHTML = `</p><p><span class="fe8798ec789af998 boximg" data-sub-html="JSP图片上传与管理实例 第2张" data-src="e.target.result}"><img src="e.target.result}" title="JSP图片上传与管理实例 第2张" alt="JSP图片上传与管理实例 第2张" ="e.name}" class="98ec789af9988ffb w-full h-24 object-cover rounded mb-2" type="text" value="file.name.replace(/"></span><p>class="789af9988ffb9287 w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 preview-name" <textarea placeholder="..."="2" class="f9988ffb92871824 -full px-2 py-1 text-sm border border-gray-300 rounded mt-2 focus:ring-2 focus:ring-blue-500 preview-desc"

`;

imagePreviews.appendChild(previewDiv);

};

reader.readAsDataURL(file);

});

previewContainer.classList.remove('hidden');

}

showUploadModal() {

document.getElementById('uploadModal').classList.remove('hidden');

}

hideUploadModal() {

document.getElementById('uploadModal').classList.add('hidden');

this.selectedFiles = [];

document.getElementById('previewContainer').classList.add('hidden');

document.getElementById('fileInput').value = '';

}

showDetailModal(image) {

document.getElementById('detailImage').src = image.url;

document.getElementById('detailImage').alt = image.name;

document.getElementById('detailName').value = image.name;

document.getElementById('detailDescription').value = image.description;

document.getElementById('detailUploadTime').textContent = image.uploadTime;

document.getElementById('detailFileSize').textContent = image.fileSize;

document.getElementById('detailModal').classList.remove('hidden');

// 绑定保存和删除事件

document.getElementById('saveDetails').onclick = () => this.saveImageDetails(image.id);

document.getElementById('deleteImage').onclick = () => this.deleteSelectedImage(image.id);

}

hideDetailModal() {

document.getElementById('detailModal').classList.add('hidden');

}

handleUpload() {

const nameInputs = document.getElementsByClassName('preview-name');

const descInputs = document.getElementsByClassName('preview-desc');

this.selectedFiles.forEach((file, index) => {

const name = nameInputs[index]?.value || file.name;

const description = descInputs[index]?.value || '';

this.imageManager.addImage(file, name, description);

});

this.hideUploadModal();

this.renderImages();

this.showNotification('图片上传成功！', 'success');

}

saveImageDetails(id) {

const name = document.getElementById('detailName').value;

const description = document.getElementById('detailDescription').value;

this.imageManager.updateImage(id, { name, description });

this.hideDetailModal();

this.renderImages();

this.showNotification('修改已保存！', 'success');

}

deleteSelectedImage(id) {

if (confirm('确定要删除这张图片吗？此操作不可撤销。')) {

this.imageManager.deleteImage(id);

this.hideDetailModal();

this.renderImages();

this.showNotification('图片已删除！', 'success');

}

}

handleSearch(query) {

const filteredImages = query ? this.imageManager.searchImages(query) : this.imageManager.images;

this.renderImageList(filteredImages);

}

handleSort(criteria) {

const sortedImages = this.imageManager.sortImages(criteria);

this.renderImageList(sortedImages);

}

handleViewChange(view) {

this.currentView = view;

this.renderImages();

}

renderImages() {

this.renderImageList(this.imageManager.images);

}

renderImageList(images) {

const container = document.getElementById('imageContainer');

const emptyState = document.getElementById('emptyState');

if (images.length === 0) {

container.classList.add('hidden');

emptyState.classList.remove('hidden');

return;

}

container.classList.remove('hidden');

emptyState.classList.add('hidden');

container.innerHTML = images.map(image => `