اسکریپت آپلود فایل با نوار پیشرفت
آپلود فایل یکی از فرآیندهای متداول در وب‌سایت‌ها و برنامه‌های آنلاین است. نوار پیشرفت ابزاری کارآمد است که به کاربران نشان می‌دهد که فرآیند آپلود چقدر پیش رفته است. در اینجا، به توضیح کامل و جامع اسکریپت آپلود فایل با نوار پیشرفت می‌پردازیم.
مراحل ایجاد اسکریپت
اولین مرحله، ایجاد یک فرم ساده HTML است. این فرم شامل ورودی برای انتخاب فایل و یک دکمه برای ارسال است.
```html
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput" />
<button type="submit">آپلود</button>
<div id="progressWrapper" style="display: none;">
<div id="progressBar" style="width: 0%; height: 20px; background: green;"></div>
</div>
</form>
```
جاوااسکریپت برای کنترل آپلود
سپس، با استفاده از جاوااسکریپت، می‌توانیم نوار پیشرفت را مدیریت کنیم. با استفاده از `XMLHttpRequest` و رویدادهای آن، می‌توانیم میزان پیشرفت را دریافت کنیم.
```javascript
document.getElementById('uploadForm').onsubmit = function(event) {
event.preventDefault();
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file) {
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(event) {
const percentComplete = (event.loaded / event.total) * 100;
document.getElementById('progressWrapper').style.display = 'block';
document.getElementById('progressBar').style.width = percentComplete + '%';
});
xhr.open('POST', '/upload', true);
xhr.send(formData);
}
};
```
توضیحات کد
- HTML Form: این فرم یک ورودی فایل و دکمه ارسال دارد. همچنین، نوار پیشرفت که به‌طور پیش‌فرض مخفی است.
- JavaScript: با استفاده از `FormData`، ما فایل انتخاب‌شده را به سرور ارسال می‌کنیم.
- Progress Event: با گوش دادن به رویداد `progress`، می‌توانیم درصد پیشرفت را محاسبه کرده و نوار پیشرفت را به‌روزرسانی کنیم.
نکات مهم
- مدیریت خطا: اطمینان حاصل کنید که خطاهای احتمالی را در زمان ارسال فایل مدیریت کنید.
- پشتیبانی از مرورگرها: برخی از مرورگرها ممکن است از `XMLHttpRequest` پشتیبانی نکنند. بررسی کنید که آیا باید از روش‌های جایگزین استفاده کنید.
- امنیت: در سرور، حتماً فایل‌ها را اعتبارسنجی کنید و از بارگذاری فایل‌های مخرب جلوگیری کنید.
با دنبال کردن این مراحل، شما می‌توانید یک سیستم آپلود فایل با نوار پیشرفت کارآمد ایجاد کنید که تجربه کاربری بهتری را فراهم می‌آورد.
