مارکت

اسکریپت آپلود چندین فایل با استفاده از کشیدن و رها کردن در JavaScript و PHP

در دنیای توسعه وب، یکی از نیازهای اصلی کاربران و توسعه‌دهندگان، قابلیت آپلود فایل‌های چندگانه است. این نیاز، زمانی اهمیت پیدا می‌کند که کاربر می‌خواهد چندین فایل، مانند تصاویر، ویدئوها، یا فایل‌های دیگر را به سرور ارسال کند. در این راستا، استفاده از فناوری‌های مدرن مانند JavaScript و PHP، این فرآیند را بسیار ساده‌تر و کاربرپسندتر می‌سازد، به خصوص زمانی که از قابلیت کشیدن و رها کردن (Drag and Drop) بهره‌مند شویم. در ادامه، به طور جامع و کامل، نحوه پیاده‌سازی این اسکریپت را شرح می‌دهیم، به طوری که هم از نظر فنی دقیق باشد و هم درک آن برای توسعه‌دهندگان جدید آسان باشد.

مقدمه‌ای بر تکنولوژی‌های مورد استفاده

قبل از شروع، باید بدانید که برای پیاده‌سازی این سیستم، نیازمند بهره‌گیری از چند فناوری کلیدی هستید. اول، JavaScript، زبان برنامه‌نویسی قدرتمند و زنده در سمت کلاینت، که مسئول مدیریت تعاملات کاربر، کشیدن و رها کردن فایل‌ها، نمایش پیش‌نمایش فایل‌ها و ارسال درخواست‌ها است. دوم، PHP، زبان سمت سرور، که وظیفه دریافت فایل‌ها، ذخیره‌سازی، پردازش و مدیریت آن‌ها را بر عهده دارد. علاوه بر این، استفاده از HTML و CSS برای ساخت رابط کاربری نیز حیاتی است.

طراحی رابط کاربری (UI)

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

نوشتن کد HTML

کد HTML شامل یک بخش برای منطقه کشیدن و رها کردن، و یک دکمه برای انتخاب فایل است. مثلا:

html  

<div id="drop-area">

  <p>کشیدن فایل‌ها اینجا یا کلیک کنید</p>

  <input type="file" id="fileElem" multiple accept="*/*" style="display:none;">

  <label for="fileElem">انتخاب فایل‌ها</label>

</div>

<div id="file-list"></div>

<button id="uploadBtn">آپلود فایل‌ها</button>

در این کد، عنصر `<div>` به عنوان منطقه کشیدن تعریف شده است. همچنین، یک `<input>` مخفی برای انتخاب فایل به صورت دستی قرار داده شده است، و برچسب `<label>` برای استایل‌دهی بهتر و کلیک روی آن.

استایل CSS

برای جذابیت و کاربرپسند بودن، باید استایل‌های مناسب اضافه کنیم. مثلا:

css  

#drop-area {

  border: 4px dashed #ccc;

  padding: 20px;

  text-align: center;

  background-color: #f9f9f9;

  cursor: pointer;

  margin: 20px;

}

#drop-area.hover {

  border-color: #333;

  background-color: #eee;

}

#file-list {

  margin-top: 20px;

}

این استایل، منطقه کشیدن را مشخص می‌کند و تغییر رنگ هنگام ".hover" برای نشان دادن حالت فعال.

نوشتن کد JavaScript برای مدیریت کشیدن و رها کردن

حالا، باید کد JavaScript بنویسیم که تعاملات کاربر با منطقه کشیدن را کنترل کند:

javascript  

const dropArea = document.getElementById('drop-area');

const fileInput = document.getElementById('fileElem');

const fileList = document.getElementById('file-list');

let files = [];
['dragenter', 'dragover'].forEach(eventName => {

  dropArea.addEventListener(eventName, (e) => {

    e.preventDefault();

    e.stopPropagation();

    dropArea.classList.add('hover');

  }, false);

});
['dragleave', 'drop'].forEach(eventName => {

  dropArea.addEventListener(eventName, (e) => {

    e.preventDefault();

    e.stopPropagation();

    dropArea.classList.remove('hover');

  }, false);

});
dropArea.addEventListener('drop', (e) => {

  const droppedFiles = e.dataTransfer.files;

  handleFiles(droppedFiles);

});
fileInput.addEventListener('change', () => {

  handleFiles(fileInput.files);

});
function handleFiles(selectedFiles) {

  for (let i = 0; i < selectedFiles.length; i++) {

    files.push(selectedFiles[i]);

  }

  displayFileList();

}
function displayFileList() {

  fileList.innerHTML = '';

  files.forEach((file, index) => {

    const li = document.createElement('li');

    li.textContent = `${file.name} (${Math.round(file.size / 1024)} KB)`;

    fileList.appendChild(li);

  });

}

در این کد، رویدادهای مربوط به کشیدن فایل‌ها، حالت hover را کنترل می‌کند و فایل‌های کشیده شده یا انتخاب شده را به آرایه `files` اضافه می‌کند، سپس آن‌ها را نمایش می‌دهد.

ارسال فایل‌ها به سرور با JavaScript

در مرحله بعد، باید امکان ارسال تمامی فایل‌ها به سرور را فراهم کنیم. برای این کار، از `FormData` استفاده می‌کنیم، که به ما اجازه می‌دهد چندین فایل را به صورت همزمان ارسال کنیم:

javascript  

document.getElementById('uploadBtn').addEventListener('click', () => {

  const formData = new FormData();

  files.forEach((file, index) => {

    formData.append('files[]', file);

  });
fetch('upload.php', {

    method: 'POST',

    body: formData  

  })

  .then(response => response.text())

  .then(data => alert(data))

  .catch(error => alert('خطا در ارسال فایل‌ها'));

});

در این قسمت، هر فایل به عنوان یک قسمت از `files[]` اضافه می‌شود، و درخواست `fetch` به سمت فایل `upload.php` ارسال می‌گردد.

پیاده‌سازی سمت سرور با PHP

حالا، باید در فایل `upload.php`، فایل‌های دریافتی را مدیریت کنیم. کد PHP به صورت زیر است:

php  

<?php  

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

    $uploadDir = 'uploads/';

    if (!is_dir($uploadDir)) {

        mkdir($uploadDir, 0777, true);

    }
foreach ($_FILES['files']['name'] as $key => $name) {

        $tmpName = $_FILES['files']['tmp_name'][$key];

        $error = $_FILES['files']['error'][$key];
if ($error === UPLOAD_ERR_OK) {

            $destination = $uploadDir . basename($name);

            if (move_uploaded_file($tmpName, $destination)) {

                echo "فایل {$name} با موفقیت آپلود شد.<br>";

            } else {

                echo "خطا در آپلود فایل {$name}.<br>";

            }

        } else {

            echo "خطا در ارسال فایل {$name}.<br>";

        }

    }

} else {

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

}

?>

در این کد، ابتدا بررسی می‌شود که آیا فایل‌ها به سرور رسیده است یا خیر. سپس، پوشه `uploads/` در سرور ساخته می‌شود، اگر وجود نداشته باشد. بعد، هر فایل در حلقه پردازش می‌شود، و با `move_uploaded_file` به مسیر مورد نظر منتقل می‌گردد. در صورت موفقیت، پیغام مناسب نشان داده می‌شود.

نتیجه‌گیری و نکات مهم

در مجموع، این سیستم یک راهکار کامل برای آپلود چندین فایل با کشیدن و رها کردن است که، با توجه به تعامل کاربر، بسیار کاربرپسند و کاربردی است. نکات مهمی که باید در نظر گرفت، عبارتند از:
- امنیت: باید محدودیت‌هایی برای حجم فایل‌ها و نوع فایل‌ها تعیین کنید تا از حملات احتمالی جلوگیری شود.
- پیشنمایش فایل‌ها: می‌توانید با افزودن قابلیت پیش‌نمایش، تجربه کاربری را بهبود بخشید.
- پشتیبانی مرورگرها: اطمینان حاصل کنید که مرورگرهای کاربران از APIهای مورد نیاز پشتیبانی می‌کنند.
- مدیریت خطاها: در هر مرحله، خطاها باید به کاربر گزارش داده شود، تا کاربر بتواند اقدامات لازم را انجام دهد.
- بهبود رابط کاربری: استایل‌های جذاب و قابل انعطاف، باعث رضایت بیشتر کاربران می‌شود.
در نتیجه، این سیستم، نمونه‌ای کامل است که می‌تواند در پروژه‌های مختلف مورد استفاده قرار گیرد و توسعه‌دهندگان، با تغییرات و بهبودهای لازم، آن را متناسب با نیازهای خود سازگار سازند. این فرآیند، ترکیبی از فناوری‌های قدرتمند و طراحی کاربرپسند است که، در کنار هم، تجربه‌ای بی‌نظیر و کارآمد را برای کاربران فراهم می‌آورد.