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

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

اسکریپت‌های آپلود فایل، ابزارهای مفیدی هستند که به کاربران امکان می‌دهند تا فایل‌ها را به سرور منتقل کنند. اما افزودن قابلیت نمایش درصد پیشرفت، تجربه کاربری را به مراتب بهبود می‌بخشد. این امکان به کاربران این احساس را می‌دهد که در حال پیگیری پیشرفت آپلود خود هستند.
در ادامه، به بررسی اجزای اصلی این اسکریپت می‌پردازیم:
۱. ایجاد فرم 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 "خطا در آپلود فایل.";
}
}
?>
```
با استفاده از این اسکریپت، کاربران می‌توانند فایل‌های خود را با مشاهده درصد پیشرفت آپلود کنند. این فرایند نه تنها تجربه کاربری را بهبود می‌بخشد بلکه به کاربران اعتماد به نفس بیشتری می‌دهد. با این حال، حتماً باید توجه داشته باشید که در هنگام پیاده‌سازی، محدودیت‌های امنیتی و اندازه فایل را نیز مد نظر قرار دهید.

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

در دنیای امروز، آپلود فایل‌ها به یکی از نیازهای اساسی کاربران وب تبدیل شده است. به همین دلیل، پیاده‌سازی یک اسکریپت آپلود که شامل نمایش درصد بارگذاری باشد، می‌تواند تجربه کاربری بهتری را فراهم کند. این ویژگی به کاربران این امکان را می‌دهد که از پیشرفت بارگذاری مطلع شوند و در نتیجه، احساس بهتری نسبت به فرآیند داشته باشند.

ساختار اصلی اسکریپت

برای ایجاد این اسکریپت، باید از زبان‌های برنامه‌نویسی مانند HTML، CSS و JavaScript استفاده کنید. ابتدا باید یک فرم ساده برای انتخاب فایل ایجاد کنید. سپس، از AJAX برای ارسال فایل به سرور بدون نیاز به بارگذاری مجدد صفحه استفاده خواهد شد.

مراحل پیاده‌سازی

1. ایجاد فرم HTML:
   

فرم شما باید شامل یک ورودی برای انتخاب فایل و یک دکمه ارسال باشد. به عنوان مثال:
```html
<form id="uploadForm">
<input type="file" id="fileInput" name="file" />
<button type="submit">آپلود</button>
</form>
<div id="progressContainer" style="width: 100%; background: #f3f3f3;">
<div id="progressBar" style="width: 0%; height: 20px; background: #4caf50;"></div>
</div>
<div id="progressText">0%</div>
```

1. استفاده از JavaScript برای ارسال فایل:
   

با استفاده از AJAX، فایل را بدون بارگذاری مجدد صفحه ارسال کنید. در اینجا از `XMLHttpRequest` استفاده می‌شود.
```javascript
document.getElementById("uploadForm").onsubmit = function(event) {
event.preventDefault();
var fileInput = document.getElementById("fileInput");
var formData = new FormData();
formData.append("file", fileInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
document.getElementById("progressBar").style.width = percentComplete + "%";
document.getElementById("progressText").innerText = Math.round(percentComplete) + "%";
}
};
xhr.onload = function() {
if (xhr.status === 200) {
alert("آپلود با موفقیت انجام شد!");
} else {
alert("خطا در آپلود فایل.");
}
};
xhr.send(formData);
};
```

نتیجه‌گیری

با استفاده از این اسکریپت، کاربران به راحتی می‌توانند فایل‌های خود را آپلود کنند و درصد پیشرفت بارگذاری را مشاهده کنند. این امر نه تنها به بهبود تجربه کاربری کمک می‌کند، بلکه همچنین اعتماد کاربران را جلب می‌نماید. با پیاده‌سازی این روش، می‌توانید به کاربران خود یک تجربه جذاب و کاربرپسند ارائه دهید.