<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { margin: 0; padding: 20px; font-family: Arial, sans-serif; transition: background-color 0.3s ease; } .file-drop { border: 2px dashed #ccc; padding: 20px; text-align: center; cursor: pointer; } .file-drop:hover { background-color: #f0f0f0; } .file-list { margin-top: 20px; } .file-list ul { list-style-type: none; padding: 0; } .file-list li { margin-bottom: 5px; } </style> </head> <body> <div id="app"> <div class="file-drop" v-if="!file"> <p>拖拽单个文件到这里 (仅限 .jpg 和 .png 文件)</p> </div> <div class="file-list" v-else> <ul> <li> {{ file.name }} ({{ file.size }} bytes) </li> </ul> </div> </div> <!-- 引入 Vue 2 CDN --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <script> new Vue({ el: '#app', data() { return { file: null }; }, methods: { handleDragOver(event) { event.preventDefault(); document.body.style.backgroundColor = '#e0f7fa'; // 拖动时改变背景颜色 }, handleDragLeave() { document.body.style.backgroundColor = ''; // 拖动离开时恢复背景颜色 }, handleDrop(event) { event.preventDefault(); document.body.style.backgroundColor = ''; // 放开时恢复背景颜色 const files = event.dataTransfer.files; if (files.length === 1) { const file = files[0]; const allowedTypes = ['image/jpeg', 'image/png']; if (allowedTypes.includes(file.type)) { this.file = file; } else { alert('只能拖拽 .jpg 和 .png 文件'); } } else { alert('只能拖拽单个文件'); } } }, mounted() { document.body.addEventListener('dragover', this.handleDragOver); document.body.addEventListener('dragleave', this.handleDragLeave); document.body.addEventListener('drop', this.handleDrop); }, beforeDestroy() { document.body.removeEventListener('dragover', this.handleDragOver); document.body.removeEventListener('dragleave', this.handleDragLeave); document.body.removeEventListener('drop', this.handleDrop); } }); </script> </body> </html>
网友回复
python如何调用openai的api实现知识讲解类动画讲解视频的合成?
html如何直接调用openai的api实现海报可视化设计及文本描述生成可编辑海报?
f12前端调试如何找出按钮点击事件触发的那段代码进行调试?
abcjs如何将曲谱播放后导出mid和wav格式音频下载?
python如何将曲子文本生成音乐mp3或wav、mid文件
python中mp3、wav音乐如何转成mid格式?
js在HTML中如何将曲谱生成音乐在线播放并下载本地?
python如何实现在windows上通过键盘来模拟鼠标操作?
python如何给win10电脑增加文件或文件夹右键自定义菜单?
python如何将音乐mp3文件解析获取曲调数据?