如何构建一个文件上传工具与拖放和云存储

By Shefali Jangid 有没有尝试过上传文件到网站? 他们中的大多数都觉得自己被困在过去。 他们想要一个文件上传工具,感觉很轻松,从他们的桌面上拖放,即时预览和进度栏,实际上让他们知道发生了什么。 无论他们是在桌面上还是手机上,或者上传一个小图像或一个巨大的视频,都无关紧要。 这正是我们将在本指南中建立的。 我们将创建一个现代化的文件上传工具,具有拖放上传、实时进度跟踪和云存储集成,所以我们不必从头开始完成一切。 最好的部分?我们将保持代码清洁和简单,以便您可以轻松地将其用于自己的项目。 在本指南结束时,我们将有一个 这符合当今的期望,使文件管理变得顺利和直观。 user-friendly file uploader tool 用户友好的文件上传工具 Key Takeaways 关键点Takeaways 将拖放功能添加到我们的上传工具中,感觉很自然,易于使用。 构建一个可靠的工具,可以高效地处理多个文件类型和大小。 无缝集成云存储,而无需花费时间在API文档上。 显示实时进度,以便用户总是知道发生了什么。 优雅地处理错误,提供明确的反馈。 Understanding the Challenge 了解挑战 构建一个文件上传功能一开始听起来很简单,我们只需要让用户选择一个文件并击中上传,对吗? 实际上,这是更复杂的,特别是如果我们想要构建一个现代的文件上传工具,人们实际上喜欢使用。 第一大障碍是界面,用户不再只需要一个“选择文件”按钮。 他们期望拖放,实时反馈,以及无缝的体验,无论是在桌面还是移动设备上。 然后是技术部分. 使用基本的HTML表单的常规文件上传速度缓慢和令人困惑. 用户看不到任何进展或消息,这让他们在等待文件上传时盯着一个空白的屏幕。 作为开发人员,您需要检查该文件是否允许,确保它不太大,并处理不同类型的文件,同时使其看起来容易和顺畅。 存储增加了另一个复杂层。你在本地存储文件吗?设置备份吗?通过CDN推动它们,以免全球用户面临延迟? 推出自己的系统是昂贵的和耗时的,但云存储API也可以感到压倒性。 除此之外,安全也是一个巨大的担忧。 文件上传是网络上最常见的攻击媒介之一. 如果您不正确验证文件,您将面临恶意软件和数据泄露的风险。 Learn more about ! secure file handling on OWASP’s guidelines 根据 OWASP 指南安全处理文件 根据 OWASP 指南安全处理文件 最后,可扩展性:当你有十个用户时,处理上传就足够容易。 但是当数百人同时使用你的文件上传工具时会发生什么?现在你还必须处理互联网的速度,你的服务器可以处理多少负载,以及存储所有文件的地方。 Building the Solution 构建解决方案 Let's start building our file uploader tool step by step. We'll begin with a simple HTML structure and progressively enhance it into a smooth, user-friendly uploader that our users will actually enjoy. Step 1: Creating the Basic Structure First, let's set up our HTML: Modern File Manager File Management System Drop files here or click to browse Support for images, documents, and videos up to 100MB

Uploading... 0% Here’s what it will look like: 步骤二:设计现代外观 现在,让我们添加一些CSS来使我们的界面视觉上有吸引力。 对于完整的CSS。 GitHub 存储库 GitHub 存储库 这是在添加CSS后看起来是什么样子: 步骤3:实现核心JavaScript功能 在此步骤中,我们将构建支持文件上传程序的逻辑,包括事件处理,验证,进度跟踪和文件管理。 步骤 3.1: 类设置和初始配置 设置 FileManager 类,并引用必要的 DOM 元素. 启动一个空数组以跟踪上传的文件,并调用方法来添加事件听众。 class FileManager { constructor() { this.uploadArea = document.getElementById("upload-area"); this.fileInput = document.getElementById("file-input"); this.progressContainer = document.getElementById("upload-progress"); this.progressFill = document.querySelector(".progress-fill"); this.progressText = document.querySelector(".progress-text"); this.fileList = document.getElementById("file-list"); this.files = []; this.initializeEventListeners(); } // Reference DOM elements for file upload // Store uploaded files // Set up event handlers 步骤 3.2:设置事件倾听者 附加点击、拖放和放下处理器,以及文件选择,以使上传器互动。 initializeEventListeners() { this.uploadArea.addEventListener("click", () => { this.fileInput.click(); }); this.fileInput.addEventListener("change", (e) => { this.handleFiles(e.target.files); }); this.uploadArea.addEventListener("dragover", (e) => { e.preventDefault(); this.uploadArea.classList.add("dragover"); }); this.uploadArea.addEventListener("dragleave", (e) => { e.preventDefault(); this.uploadArea.classList.remove("dragover"); }); this.uploadArea.addEventListener("drop", (e) => { e.preventDefault(); this.uploadArea.classList.remove("dragover"); this.handleFiles(e.dataTransfer.files); }); } // Open file dialog when user clicks the upload area // Handle file selection from the input // Drag over the area - highlight the drop zone // Remove highlight when dragging leaves // Handle files dropped onto the area 步骤 3.3:处理和验证文件 根据大小过滤文件,并只继续使用有效的文件。 handleFiles(fileList) { const validFiles = Array.from(fileList).filter((file) => { if (file.size > 100 * 1024 * 1024) { alert(`${file.name} is too large. Maximum size is 100MB.`); return false; } return true; }); if (validFiles.length > 0) { this.uploadFiles(validFiles); } } // Reject files larger than 100MB ⚠️重要:在客户端和服务器端验证文件. 客户端检查提供即时反馈,但只有服务器端验证才能保护我们的应用程序免受恶意上传。 步骤 3.4:上传多个文件 显示进度栏,一次上传每个文件,并在完成后隐藏进度。 async uploadFiles(files) { this.showProgress(); for (let i = 0; i { let progress = 0; const interval = setInterval(() => { progress += Math.random() * 15; if (progress >= 100) { progress = 100; clearInterval(interval); this.addFileToList(file); resolve(); } const overallProgress = ((current - 1) / total) * 100 + progress / total; this.updateProgress(overallProgress, `Uploading ${current} of ${total}...`); }, 200); }); } // Add file to list once upload is done 步骤 3.6:显示已上传的文件 将上传的文件以图标,大小,日期和删除选项返回用户界面。 addFileToList(file) { const fileCard = document.createElement("div"); fileCard.className = "file-card"; const fileIcon = this.getFileIcon(file.type); const fileSize = this.formatFileSize(file.size); fileCard.innerHTML = ` ${fileIcon} ${file.name} ${fileSize} • ${new Date().toLocaleDateString()}

Delete `; this.fileList.appendChild(fileCard); this.files.push(file); } 步骤 3.7:删除文件 允许用户删除文件,相应地更新文件列表和用户界面。 deleteFile(fileName) { this.files = this.files.filter((f) => f.name !== fileName); this.fileList.innerHTML = ""; this.files.forEach((f) => this.addFileToList(f)); } 步骤 3.8: 基于类型的文件图标 根据 MIME 文件类型显示适当的图标,以提供更好的用户体验。 getFileIcon(mimeType) { if (mimeType.startsWith("image/")) return "🖼️"; if (mimeType.startsWith("video/")) return "🎥"; if (mimeType.startsWith("audio/")) return "🎵"; if (mimeType.includes("pdf")) return "📄"; if (mimeType.includes("word")) return "📝"; if (mimeType.includes("excel") || mimeType.includes("spreadsheet")) return "📊"; return "📁"; } 提示:显示文件图标和格式化大小,以便给用户更好的反馈。 步骤 3.9:格式化文件大小 将文件大小转换为可读单元,如KB、MB或GB。 formatFileSize(bytes) { if (bytes === 0) return "0 Bytes"; const k = 1024; const sizes = ["Bytes", "KB", "MB", "GB"]; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]; } 步骤 3.10:显示和隐藏上传进展 控制进度栏的可见性,并动态更新其值。 showProgress() { this.progressContainer.classList.remove("hidden"); } hideProgress() { setTimeout(() => { this.progressContainer.classList.add("hidden"); this.updateProgress(0, "Upload complete!"); }, 1000); } updateProgress(percent, text) { this.progressFill.style.width = percent + "%"; this.progressText.textContent = text; } } 步骤 3.11:初始化文件管理器 创建 FileManager 类的实例以启动功能。 const fileManager = new FileManager(); // Start the file manager 访问此文件上传工具的完整源代码在这里! 访问此文件上传工具的完整源代码在这里! 访问此文件上传工具的完整源代码在这里! 通过这种方式,我们的文件上传工具完全互动,用户可以轻松拖放、下载、上传和管理文件。 Ref: MDN Web API - 文件 MDN Web API - 文件 MDN Web API - 文件 步骤 4:集成云存储中的文件集 在此步骤中,我们将将我们的文件上传工具通过将其连接到云连接到下一个层次。 直接从云存储中获取,生成安全链接,让用户感觉到一切无缝。 档案 档案 首先,将 Filestack SDK 添加到我们的 HTML 标题中: https://static.filestackapi.com/filestack-js/4.x.x/filestack.min.js 然后,让我们扩展我们的 FileManager 类以集成云上传、显示预览和管理文件链接。 详细资料,参观 . Filestack 的 API 参考 Filestack 的 API 参考 步骤 4.1:通过FileStacks集成来扩展 FileManager class EnhancedFileManager extends FileManager { constructor() { super(); this.client = filestack.init('YOUR_API_KEY_HERE'); this.picker = null; } // Extend the basic FileManager class to add cloud storage functionality using Filestack // Call the parent class constructor // Initialize Filestack with your API key // Placeholder for the Filestack picker instance 重要: 使用自己的 API 密钥而不是 YOUR_API_KEY_HERE;您可以从 Filestack 仪表板中获取它。 重要: 使用自己的 API 密钥而不是 YOUR_API_KEY_HERE;您可以从 Filestack 仪表板中获取它。 Filestack 和其他云服务需要 API 密钥和设置. 对于生产使用,始终保护 API 密钥并配置适当的安全设置。 步骤 4.2:使用 Filestack 按钮初始化事件收听器 initializeEventListeners() { super.initializeEventListeners(); this.addFilestackButton(); } // Set up existing file selection and drag-drop listeners // Add a new button for accessing cloud storage through Filestack 步骤 4.3:添加 FileStacks 选择按钮 addFilestackButton() { const button = document.createElement("button"); button.textContent = "Browse Cloud Storage"; button.className = "filestack-btn"; button.onclick = (e) => { e.stopPropagation(); this.openFilestack(); }; this.uploadArea.appendChild(button); } // Button label // Apply styling // Open the Filestack picker when the button is clicked // Prevent triggering other events // Add the button to the upload area 步骤 4.4:配置和打开文件堆栈选择器 openFilestack() { const options = { accept: ['image/*', 'video/*', 'application/pdf', '.doc', '.docx'], maxFiles: 10, uploadInBackground: false, onUploadDone: (result) => { result.filesUploaded.forEach(file => { this.addCloudFileToList(file); }); } }; this.client.picker(options).open(); } // Allowed file types // Limit number of files selectable at once // Upload immediately instead of in background // Add each uploaded file to the file list // Open the Filestack file picker with the above options 步骤 4.5:从云存储中显示上传的文件 addCloudFileToList(file) { const fileCard = document.createElement('div'); fileCard.className = 'file-card cloud-file'; fileCard.innerHTML = ` ☁️ ${file.filename} ${this.formatFileSize(file.size)} • Cloud Storage

View Copy Link `; this.fileList.appendChild(fileCard); } // Styling for cloud files // Add to the file list 步骤 4.6:将文件直接上传到Filestack async uploadSingleFile(file, current, total) { try { const fileHandle = await this.client.upload(file, { onProgress: (evt) => { const progress = (evt.loaded / evt.total) * 100; const overallProgress = ((current - 1) / total) * 100 + (progress / total); this.updateProgress(overallProgress, `Uploading ${current} of ${total}...`); } }); this.addCloudFileToList({ filename: file.name, size: file.size, url: fileHandle.url }); } catch (error) { console.error('Upload failed:', error); alert(`Failed to upload ${file.name}. Please try again.`); } } } // Upload file using Filestack and track progress // Once uploaded, add the file to the list view 步骤 4.7:初始化增强文件管理器 const fileManager = new EnhancedFileManager(); // Instantiate the EnhancedFileManager to replace the default FileManager functionality 添加此 CSS 以匹配我们的现有风格: .filestack-btn, .btn-view, .btn-share { margin-top: 1rem; padding: 0.75rem 1.25rem; background: linear-gradient(135deg, #00030c, #764ba2); color: #fff; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .filestack-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); } .filestack-btn:active { transform: translateY(0); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15); } 这种整合将我们的基本文件管理器转化为强大的工具。 它可以处理来自多个来源的文件,本地上传,谷歌驱动器和Dropbox等云存储服务,甚至URL导入。 Filestack 管理了场景后面的所有重型升降。 这包括处理不同的存储提供商,CDN分发和文件转换。 Ref: 文件列表文件 Filestack 文件 Filestack 文件 加强实施 现在,让我们为我们的上传工具添加一些先进的功能,这将使我们的文件管理器脱颖而出。 实时文件预览 用户喜欢即时反馈. 对于图像,视频和PDF,我们可以直接在文件列表中生成预览: generatePreview(file) { if (file.mimetype && file.mimetype.startsWith("image/")) { return ` `; } else if (file.mimetype === "application/pdf") { return ` `; } return ""; } 添加到我们的 CSS 文件中: .file-preview { width: 100%; max-height: 150px; object-fit: cover; border-radius: 10px; margin-top: 10px; cursor: pointer; } 并更新 addCloudFileToList 函数以显示预览如下: addCloudFileToList(file) { const fileCard = document.createElement("div"); fileCard.className = "file-card cloud-file"; const preview = this.generatePreview(file); // ☁️ ${file.filename} ${this.formatFileSize(file.size)} • Cloud Storage

${preview} View Copy Link `; this.fileList.appendChild(fileCard); } 提示:即时预览可以通过让用户视觉确认上传来提高用户的信任。 搜索和过滤 通过允许用户实时搜索和过滤文件,使我们的文件上传工具更加用户友好: implementSearch() { const searchInput = document.createElement("input"); searchInput.type = "text"; searchInput.placeholder = "Search files..."; searchInput.className = "search-input"; this.uploadArea.insertAdjacentElement("beforebegin", searchInput); searchInput.addEventListener("input", (e) => { this.filterFiles(e.target.value); }); } filterFiles(query) { const fileCards = this.fileList.querySelectorAll(".file-card"); fileCards.forEach((card) => { const fileName = card.querySelector("h4").textContent.toLowerCase(); card.style.display = fileName.includes(query.toLowerCase()) ? "flex" : "none"; }); } 在 EnhancedFileManager 构建器中,拨打 this.implementSearch();如下: class EnhancedFileManager extends FileManager { constructor() { super(); this.client = filestack.init("YOUR_API_KEY"); this.picker = null; this.implementSearch(); } ... } // <-- add this 再加上这个 CSS: .search-input { width: 100%; padding: 0.75rem 1.25rem; margin-bottom: 20px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.95rem; color: #2d3748; outline: none; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .search-input:focus { border-color: #764ba2; box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.3); } .search-input::placeholder { color: #a0aec0; font-style: italic; } 最佳实践: 始终允许用户在管理大清单时轻松过滤文件。 使用 Filestack 的美好之处在于,许多先进的功能都嵌入其中。 You get image transformations, document conversions, and even intelligent cropping out of the box. 这意味着您不需要从头开始构建这些复杂的功能。 您也不需要维护多个第三方服务。 最佳实践和常见陷阱 以下是我在构建文件上传工具时学到的一些重要教训(有时是艰难的): 在客户端和服务器上验证文件:客户端验证是有帮助的,因为它为用户提供了快速反馈,但真正的安全性也来自于在服务器上检查文件。 正确处理错误:上传并不总是顺利的. 文件可能会失败,网络可能会崩溃,或服务器可能会崩溃. 始终显示明确的错误消息,并为用户提供一种方法再次尝试。 可访问性问题:确保您的上传程序适合所有人。为屏幕阅读器添加ARIA标签,允许键盘导航,不要仅依赖颜色来显示消息。 观看上传性能:慢网络上的大文件可能会耗时或失败. 使用分割的上传可以帮助,并显示用户剩余的时间会产生很大的差异。 存储成本计划:存储文件可能很快变得昂贵. 清理临时文件,在可能的情况下压缩它们,并根据基础设施的容量设置文件大小限制。 安全存储文件:始终将上传的文件存储在您的 Web 根目录之外,并通过签署的 URL 服务,以防止未经授权的访问并提高安全性。 结论 构建一个现代的文件上传工具不必是复杂的。从一个坚实的HTML基础开始,逐步提高它,并 . use tools like Filestack for cloud storage 使用云存储工具如Filestack 目标是一个流畅,用户友好的上传器,人们实际上喜欢使用。 首先关注体验:让拖放感觉自然,预览立即加载,进度栏有意义。 保持复杂的技术在幕后,隐藏在一个干净和简单的界面后面.一旦它工作,您可以添加先进的功能,如文件共享,协作编辑或自动工作流。 文件管理是用户每天互动的东西,你可以做到这一点,你将有更快乐的用户,更好的参与度和更少的支持票。 进一步学习的资源 GitHub 完整代码存储库 MDN Web API - 文件 OWASP - 安全文件上传 Filestack 文件 GitHub 完整代码存储库 MDN Web API - 文件 OWASP - 安全文件上传 Filestack 文件 关于作者 Shefali Jangid是一名网页开发人员,技术作家和内容创作者,热衷于构建直观的开发工具和教育资源,她在她的博客上分享教程,代码片段和实用提示。 帮助开发人员通过清洁,高效和易于访问的代码创建更好的Web体验。 主持人.dev 主持人.dev