مقدمه
آپلود فایل‌ها از طریق PHP یکی از قابلیت‌های مهم در توسعه وب است. اما یکی از چالش‌های اصلی در این فرآیند، نمایش پیشرفت بارگذاری فایل به کاربر است. در اینجا، ما به بررسی اسکریپتی برای آپلود فایل با نمایش درصد پیشرفت می‌پردازیم.
ساختار پروژه
برای شروع، نیاز به چند فایل داریم:
- HTML برای بارگذاری فایل
- PHP برای پردازش بارگذاری
- JavaScript برای نمایش درصد پیشرفت
کد HTML
در ابتدا، یک فرم ساده HTML برای بارگذاری فایل ایجاد می‌کنیم:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>آپلود فایل با پیشرفت</title>
<script src="https://code.jquery.com/jquery-
- 6.0.min.js"></script>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" required>
<button type="submit">بارگذاری</button>
</form>
<progress id="progressBar" value="0" max="100"></progress>
<div id="status"></div>
<script>
$(document).ready(function() {
$('#uploadForm').on('submit', function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total * 100;
$('#progressBar').val(percentComplete);
$('#status').text(Math.round(percentComplete) + '% بارگذاری شده');
}
}, false);
return xhr;
},
type: 'POST',
url: 'upload.php',
data: formData,
processData: false,
contentType: false,
success: function(response) {
$('#status').text('بارگذاری با موفقیت انجام شد!');
},
error: function() {
$('#status').text('خطا در بارگذاری فایل.');
}
});
});
});
</script>
</body>
</html>
```
کد PHP
اکنون می‌خواهیم کدی برای پردازش بارگذاری فایل ایجاد کنیم. این کد در فایلی به نام `upload.php` قرار می‌گیرد:
```php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['file'])) {
$file = $_FILES['file'];
$uploadDir = 'uploads/';
$uploadFile = $uploadDir . basename($file['name']);
if (move_uploaded_file($file['tmp_name'], $uploadFile)) {
echo "فایل با موفقیت بارگذاری شد.";
} else {
echo "خطا در بارگذاری فایل.";
}
} else {
echo "فایل انتخاب نشده است.";
}
} else {
echo "درخواست نامعتبر است.";
}
?>
```
نتیجه‌گیری
با اجرای این کد، کاربران می‌توانند فایل‌ها را بارگذاری کنند و درصد پیشرفت بارگذاری آن‌ها را مشاهده کنند. این روش نه تنها تجربه کاربری را بهبود می‌بخشد، بلکه به کاربر اجازه می‌دهد تا از وضعیت بارگذاری مطلع باشد. بنابراین، با استفاده از این اسکریپت، می‌توانید به راحتی فایل‌ها را با PHP بارگذاری کنید و پیشرفت آن‌ها را نمایش دهید.
اسکریپت آپلود فایل با PHP و نمایش درصد بارگذاری
در دنیای وب، آپلود فایل یکی از ویژگی‌های مهم است. با این حال، نمایش درصد بارگذاری، تجربه کاربری را به طرز قابل توجهی بهبود می‌بخشد. در اینجا، یک راهنمای جامع برای ساخت اسکریپت آپلود فایل با PHP و نمایش درصد بارگذاری ارائه می‌شود.
مراحل ایجاد اسکریپت
مرحله 1: ایجاد فرم HTML
ابتدا یک فرم ساده برای انتخاب فایل ایجاد کنید. این فرم می‌تواند به شکل زیر باشد:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>آپلود فایل</title>
<script src="https://code.jquery.com/jquery-
- 6.0.min.js"></script>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" id="file" required>
<input type="submit" value="آپلود">
</form>
<div id="progress">
<div id="progress-bar" style="width: 0%; height: 20px; background: green;"></div>
</div>
<div id="status"></div>
<script>
$(document).ready(function() {
$('#uploadForm').on('submit', function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
$('#progress-bar').css('width', percentComplete + '%');
$('#status').text(percentComplete + '% بارگذاری شده');
}
}, false);
return xhr;
},
type: 'POST',
url: 'upload.php',
data: formData,
processData: false,
contentType: false,
success: function(response) {
$('#status').text('آپلود با موفقیت انجام شد!');
},
error: function() {
$('#status').text('خطا در آپلود!');
}
});
});
});
</script>
</body>
</html>
```
مرحله 2: ایجاد اسکریپت PHP برای پردازش آپلود
سپس، یک فایل PHP برای پردازش آپلود ایجاد کنید. این می‌تواند به شکل زیر باشد:
```php
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
echo "فایل ". htmlspecialchars(basename($_FILES["file"]["name"])). " با موفقیت آپلود شد.";
} else {
echo "متاسفانه، خطایی در آپلود فایل پیش آمد.";
}
?>
```
توضیحات تکمیلی
- اعتبارسنجی فایل:
قبل از آپلود، بهتر است اعتبارسنجی‌های لازم برای فرمت فایل، اندازه و امنیت انجام شود.
- استایل‌دهی:
می‌توانید با CSS، ظاهر نوار پیشرفت را زیباتر کنید.
- امنیت:
اطمینان حاصل کنید که فایل‌های آپلود شده در دایرکتوری امن قرار دارند و از حملات احتمالی جلوگیری شود.
نتیجه‌گیری
با پیروی از این مراحل، شما می‌توانید یک اسکریپت ساده برای آپلود فایل با نمایش درصد بارگذاری بسازید. این کار نه تنها به بهبود تجربه کاربری کمک می‌کند، بلکه امکان مدیریت فایل‌های آپلود شده را نیز فراهم می‌سازد.
