File Upload Techniques: From Basic Validation to Advanced Resumable Uploads

This article provides a comprehensive analysis of file upload scenarios in web development, covering common use cases including duplicate uploads, preview functionality, drag-and-drop interfaces, image cropping, progress visualization, file compression, pre-upload validation, chunked uploads, encryption, and pause/resume capabilities.

The content begins by examining fundamental file objects in JavaScript - Blob and File. Blob represents immutable raw data that isn't necessarily in JavaScript-native format, while File extends Blob to support user system files and enables JavaScript access to file information. The File object includes properties like lastModified, name, size, and type.

Pre-upload validation is explored in depth, covering three main approaches: using the HTML input accept attribute with MIME type lists, checking file extensions or MIME types directly, and performing binary file header analysis for strict validation. The article demonstrates how to use ArrayBuffer and DataView to read the first 8 bytes of files to verify their actual format, preventing security risks from files with misleading extensions.

Common file format signatures are documented, including PNG (89 50 4E 47 0D 0A 1A 0A), JPG (FF D8), GIF (47 49 46 38 39 61), and BMP (42 4D). The article provides complete code examples for validating both file type and dimensions using Image objects and binary header analysis.

Large file uploads are addressed through chunked upload techniques. The process involves splitting files into manageable pieces, uploading each chunk sequentially, tracking progress using ProgressEvent, and merging chunks on the server side. The article demonstrates using FormData with multipart/form-data headers and provides detailed implementation for calculating overall upload progress based on individual chunk completion rates.

Resumable uploads (断点续传) are implemented by storing uploaded chunks in dedicated directories, checking existing chunks before upload to determine starting position, and using axios CancelToken to simulate pause/resume functionality. The server-side implementation uses koa-multer for handling multipart form data and provides endpoints for chunk upload and merge operations.

The article concludes by noting that many advanced features like compression and encryption are available through third-party CDN services, and references additional reading materials on related topics.