0
سبد دانلود 0

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

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


در دنیای امروز، برنامه‌نویسی وب به سمت توسعه اپلیکیشن‌هایی حرکت می‌کند که نه تنها کاربرپسند هستند، بلکه تجربه کاربری را به حداکثر می‌رسانند. یکی از نیازهای رایج در توسعه وب، امکان آپلود فایل توسط کاربران است. اما مشکل اصلی زمانی بروز می‌کند که حجم فایل‌های ارسالی بزرگ است یا اینترنت کاربر محدود است. در این حالت، نیاز است که فرایند آپلود فایل به صورت آگاهانه و تعاملی نمایش داده شود، به خصوص نشان دادن میزان پیشرفت آپلود. بنابراین، اسکریپتی که بتواند این نیاز را برآورده کند، بسیار ارزشمند است. در این مقاله، به صورت جامع و کامل به بررسی نحوه پیاده‌سازی یک اسکریپت آپلود فایل با PHP خواهیم پرداخت، که علاوه بر قابلیت آپلود، درصد پیشرفت فایل را نیز نمایش می‌دهد.
مبانی آپلود فایل در PHP
قبل از هر چیز، باید بدانید که PHP به عنوان یک زبان سمت سرور، امکاناتی برای مدیریت فایل‌های ارسالی دارد. از طریق متغیرهای جهانی مانند `$_FILES`، می‌توان اطلاعات مربوط به فایل‌های آپلود شده را دریافت کرد. این اطلاعات شامل نام فایل، سایز، نوع و مسیر موقت ذخیره‌سازی است. اما، مشکل این است که PHP به طور پیش‌فرض، امکان نمایش درصد پیشرفت را ندارد. برای حل این مشکل، نیاز است که از فناوری‌های دیگر، مثل AJAX و فناوری‌های مرورگر، بهره ببریم.
نقش AJAX در آپلود فایل و نمایش درصد پیشرفت
AJAX یا Asynchronous JavaScript and XML، به توسعه‌دهندگان این امکان را می‌دهد که درخواست‌های سمت کلاینت (مرورگر) به سرور را بدون نیاز به رفرش صفحه، ارسال کنند. این امر، مخصوصا در عملیات‌هایی مانند آپلود فایل، بسیار مفید است. با استفاده از AJAX، می‌توان در هر لحظه وضعیت آپلود فایل را دریافت و نمایش داد. اما، برای نمایش درصد پیشرفت، باید از API هایی مانند `XMLHttpRequest` و به‌خصوص ویژگی `upload` آن بهره ببریم. این ویژگی به ما اجازه می‌دهد تا رویدادهای مربوط به پیشرفت را مدیریت کنیم و درصد آپلود را نشان دهیم.
نقش سرور در مدیریت آپلود فایل
در سمت سرور، PHP وظیفه دریافت فایل و ذخیره آن در مسیر مشخص را بر عهده دارد. اما، برای به‌دست آوردن درصد پیشرفت، باید از رویدادهای سمت کلاینت و درخواست‌های AJAX بهره گرفت. همچنین، ممکن است نیاز باشد که از فناوری‌های دیگر مانند `session` یا `file upload progress` در PHP استفاده کنیم. در حقیقت، PHP به صورت پیش‌فرض، قابلیت نظارت بر روند آپلود را ندارد، اما با ترکیب آن با `session` و تنظیمات خاص در `php.ini`، می‌توان این کار را انجام داد.
پروسه کلی پیاده‌سازی
در اینجا، مراحل کلی پیاده‌سازی یک اسکریپت آپلود فایل با نمایش درصد پیشرفت را توضیح می‌دهیم:
1. ایجاد فرم HTML برای انتخاب فایل:
فرم باید شامل یک input نوع فایل و یک دکمه باشد که کاربر بتواند فایل مورد نظر خود را انتخاب کند.
2. نوشتن کد JavaScript برای مدیریت آپلود:
در این بخش، از `XMLHttpRequest` استفاده می‌کنیم. این شیء، قابلیت مدیریت رویدادهای آپلود را دارد. با استفاده از `xhr.upload.addEventListener('progress', ...)`، می‌توان درصد پیشرفت را دریافت و در صفحه نمایش داد.
3. ایجاد درخواست AJAX برای ارسال فایل:
فایل انتخاب شده، در قالب یک `FormData` قرار می‌گیرد و با روش POST، به سمت سرور ارسال می‌شود. در حین این عملیات، رویدادهای مربوط به پیشرفت، به‌روز می‌شوند.
4. کد سمت سرور PHP:
فایل دریافت شده، در مسیر مشخص ذخیره می‌شود، و در صورت نیاز، می‌توان اطلاعات مربوط به آپلود را بازگرداند. در این مرحله، فایل به صورت عادی در سرور ذخیره می‌شود، و هیچ نیاز خاصی به نظارت بر پیشرفت در سمت سرور نیست؛ چون این کار در سمت کلاینت انجام می‌شود.
5. نمایش درصد پیشرفت:
در صفحه، یک عنصر HTML مانند `progress bar` یا `div` برای نشان دادن میزان پیشرفت قرار می‌گیرد. هر زمان رویداد `progress` فعال شد، درصد مربوطه محاسبه و نمایش داده می‌شود.
کد نمونه HTML و JavaScript
html  

<!DOCTYPE html>

<html lang="fa">

<head>

<meta charset="UTF-8" />

<title>آپلود فایل با درصد پیشرفت</title>

<style>

  #progressContainer {

    width: 100%;

    background-color: #ddd;

  }

  #progressBar {

    width: 0%;

    height: 30px;

    background-color: #4caf50;

  }

</style>

</head>

<body>

<h2>آپلود فایل با نمایش درصد</h2>

<input type="file" id="fileInput" />

<button onclick="uploadFile()">آپلود</button>

<div id="progressContainer">

  <div id="progressBar"></div>

</div>

<p id="status"></p>
<script>

function uploadFile() {

  const file = document.getElementById('fileInput').files[0];

  if (!file) {

    alert('لطفا فایلی را انتخاب کنید!');

    return;

  }
const xhr = new XMLHttpRequest();

  const formData = new FormData();

  formData.append('file', file);
xhr.upload.addEventListener('progress', function(e) {

    if (e.lengthComputable) {

      const percentComplete = (e.loaded / e.total) * 100;

      document.getElementById('progressBar').style.width = percentComplete + '%';

      document.getElementById('status').innerText = Math.round(percentComplete) + '% بارگذاری شده';

    }

  });
xhr.onreadystatechange = function() {

    if (xhr.readyState === XMLHttpRequest.DONE) {

      if (xhr.status === 200) {

        document.getElementById('status').innerText = 'آپلود کامل!';

      } else {

        document.getElementById('status').innerText = 'مشکلی در هنگام آپلود پیش آمد.';

      }

    }

  };
xhr.open('POST', 'upload.php', true);

  xhr.send(formData);

}

</script>

</body>

</html>

کد PHP (upload.php)
php  

<?php  

if (isset($_FILES['file'])) {

    $targetDir = "uploads/";

    if (!is_dir($targetDir)) {

        mkdir($targetDir, 0755, true);

    }

    $fileName = basename($_FILES['file']['name']);

    $targetFilePath = $targetDir . $fileName;
if (move_uploaded_file($_FILES['file']['tmp_name'], $targetFilePath)) {

        echo "فایل با موفقیت آپلود شد.";

    } else {

        echo "خطا در آپلود فایل.";

    }

} else {

    echo "فایلی ارسال نشده است.";

}

?>

نکات و بهبودهای ممکن
در این فرآیند، نکات مهمی وجود دارد که باید به آن‌ها توجه کنید. برای مثال، باید محدودیت‌های اندازه فایل در `php.ini` تنظیم شود تا فایل‌های بزرگ بتوانند آپلود شوند. همچنین، باید امنیت سیستم را در نظر گرفت، مانند بررسی نوع فایل و جلوگیری از حملات احتمالی. علاوه بر این، امکان افزودن قابلیت توقف و ادامه آپلود، یا نمایش پیام‌های خطا به کاربر، امکاناتی هستند که می‌توانند تجربه کاربری را بهبود بخشند.
در نهایت، این روش، روشی ساده و موثر برای پیاده‌سازی آپلود فایل با نمایش درصد است. اما، برای پروژه‌های بزرگ و حساس، نیاز است که از فناوری‌های پیشرفته‌تر و امنیت بیشتر بهره‌برداری کنید. به هر حال، این نمونه، پایه‌ای قوی است که می‌تواند به راحتی توسعه یابد و به نیازهای خاص شما پاسخ دهد.
جمع‌بندی
در این مقاله، با گام‌های مختلف و جزئیات کامل، نحوه ساخت یک اسکریپت آپلود فایل در PHP را که علاوه بر این، درصد پیشرفت را نشان می‌دهد، توضیح دادیم. این فرآیند، با ترکیب فناوری‌های سمت کلاینت و سرور، تجربه کاربری رضایت‌بخشی را فراهم می‌کند و به توسعه‌دهندگان امکان می‌دهد، سایت‌هایی با قابلیت‌های پیشرفته‌تر بسازند. در ادامه، می‌توانید این نمونه را بر اساس نیازهای خود گسترش دهید، امکانات جدید اضافه کنید و امنیت آن را افزایش دهید.
Error, Try Again
مشاهده بيشتر