上傳前獲取檔案大小和圖像尺寸對於驗證和管理提交至關重要。以下是如何使用 HTML5 和 JavaScript 實現此目的:
檔案 API 提供了一種機制來存取有關使用者所選檔案的資訊。這可以用來檢索檔案大小、圖像高度和寬度。考慮以下範例:
const browseInput = document.getElementById('browse'); const previewContainer = document.getElementById('preview'); const handleFileSelection = (event) => { previewContainer.innerHTML = ''; const files = event.target.files; if (!files || files.length === 0) { alert('No files selected!'); return; } for (const file of files) { // Check if the file is an image if (!file.type.startsWith('image/')) { previewContainer.insertAdjacentHTML('beforeend', `Unsupported format: ${file.name}<br>`); continue; } // Create an image element to calculate width and height const img = new Image(); img.onload = () => { previewContainer.appendChild(img); const fileInfo = ` <div> ${file.name} ${img.width} × ${img.height} ${file.type} ${Math.round(file.size / 1024)} KB </div> `; previewContainer.insertAdjacentHTML('beforeend', fileInfo); }; // Load the image and release the URL when done img.src = URL.createObjectURL(file); } }; browseInput.addEventListener('change', handleFileSelection);
此方法可讓您在上傳之前取得檔案大小、影像寬度和高度,從而更好地控制可接受的檔案類型和尺寸。此外,您可以將此資訊用於驗證和顯示目的,例如在提交之前提供所選圖像的預覽。
以上是使用 HTML5 和 JavaScript 上傳檔案之前如何取得檔案大小、圖像寬度和高度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!