تگ های موضوع اسکریپت آپلود با نمایش درصد

اسکریپت آپلود با نمایش درصد

اسکریپت‌های آپلود فایل، ابزارهای مفیدی هستند که به کاربران امکان می‌دهند تا فایل‌ها را به سرور منتقل کنند. اما افزودن قابلیت نمایش درصد پیشرفت، تجربه کاربری را به مراتب بهبود می‌بخشد. این امکان به کاربران این احساس را می‌دهد که در حال پیگیری پیشرفت آپلود خود هستند.
در ادامه، به بررسی اجزای اصلی این اسکریپت می‌پردازیم:
۱. ایجاد فرم HTML
در ابتدا باید یک فرم ساده HTML ایجاد کنید که کاربر بتواند فایل مورد نظر خود را انتخاب کند.
```html
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" id="file" required>
<button type="submit">آپلود</button>
<progress id="progressBar" value="0" max="100"></progress>
</form>
```
۲. استفاده از JavaScript
در این مرحله، با استفاده از JavaScript، می‌توانیم فرایند آپلود را مدیریت کنیم. به عنوان مثال، می‌توانیم از `XMLHttpRequest` برای ارسال فایل استفاده کنیم.
```javascript
document.getElementById('uploadForm').onsubmit = function(event) {
event.preventDefault();
var file = document.getElementById('file').files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
document.getElementById('progressBar').value = percentComplete;
}
};
xhr.onload = function() {
if (xhr.status === 200) {
alert('آپلود با موفقیت انجام شد!');
} else {
alert('خطایی در هنگام آپلود پیش آمد.');
}
};
xhr.send(formData);
};
```
۳. مدیریت سرور
در سمت سرور، فایل‌ها باید به درستی دریافت و ذخیره شوند. در مثال بالا، فایل به اسکریپت PHP 'upload.php' ارسال می‌شود.
```php
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
echo "فایل ". htmlspecialchars(basename($_FILES["file"]["name"])). " با موفقیت آپلود شد.";
} else {
echo "خطا در آپلود فایل.";
}
}
?>
```
با استفاده از این اسکریپت، کاربران می‌توانند فایل‌های خود را با مشاهده درصد پیشرفت آپلود کنند. این فرایند نه تنها تجربه کاربری را بهبود می‌بخشد بلکه به کاربران اعتماد به نفس بیشتری می‌دهد. با این حال، حتماً باید توجه داشته باشید که در هنگام پیاده‌سازی، محدودیت‌های امنیتی و اندازه فایل را نیز مد نظر قرار دهید.