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


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

مقدمه




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

طراحی قسمت کلاینت (جاوااسکریپت و HTML)




در قسمت کلاینت، ابتدا نیاز داریم یک ساختار HTML برای قرارگیری ناحیه کشیدن و رها کردن طراحی کنیم. این ناحیه باید به گونه‌ای باشد که کاربر بتواند به راحتی فایل‌های خود را در آن بکشاند و رها کند. برای این منظور، یک عنصر `<div>` با کلاس خاص تعریف می‌کنیم، و سپس با استفاده از جاوااسکریپت، رویدادهای مربوط به کشیدن و رها کردن را مدیریت می‌کنیم.
برای شروع، کد HTML به شکل زیر خواهد بود:
html  


<div id="drop-zone" class="drop-zone">


  فایل‌ها را اینجا بکشید و رها کنید  


</div>


<input type="file" id="file-input" multiple style="display:none" />


<button id="browse-btn">انتخاب فایل‌ها</button>


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

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


const dropZone = document.getElementById('drop-zone');


const fileInput = document.getElementById('file-input');


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


const browseBtn = document.getElementById('browse-btn');
let filesArray = [];
dropZone.addEventListener('dragover', (e) => {


  e.preventDefault();


  dropZone.classList.add('drag-over');


});
dropZone.addEventListener('dragleave', () => {


  dropZone.classList.remove('drag-over');


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


  e.preventDefault();


  dropZone.classList.remove('drag-over');


  const droppedFiles = Array.from(e.dataTransfer.files);


  addFiles(droppedFiles);


});
browseBtn.addEventListener('click', () => {


  fileInput.click();


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


  addFiles(Array.from(fileInput.files));


});
function addFiles(newFiles) {


  newFiles.forEach(file => {


    filesArray.push(file);


  });


  updateFileList();


}
function updateFileList() {


  fileListContainer.innerHTML = '';


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


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


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


    const removeBtn = document.createElement('button');


    removeBtn.textContent = 'حذف';


    removeBtn.onclick = () => {


      filesArray.splice(index, 1);


      updateFileLis...  ← ادامه مطلب در magicfile.ir