اسکریپت آپلود چندین فایل با استفاده کشیدن و رها کردن در javascript - php

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

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

ساختار HTML برای آپلود چندین فایل با قابلیت کشیدن و رها کردن

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

html  

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


آپلود فایل‌ها

در این ساختار، `drop-zone` منطقه‌ای است که فایل‌ها در آن کشیده می‌شوند، و `file-input`، ورودی فایل است که به صورت پنهان یا قابل مشاهده، برای انتخاب دستی فایل‌ها استفاده می‌شود. دکمه `upload-btn` برای شروع فرآیند آپلود است، و `file-list` برای نمایش فایل‌های انتخاب شده.

استایل CSS برای بهتر دیده شدن منطقه کشیدن و رها کردن

برای جذاب‌تر کردن و نشان دادن واضح‌تر منطقه کشیدن و رها کردن، می‌توانیم CSS زیر را به کار ببریم:

css  
#drop-zone {
width: 300px;
height: 150px;
border: 2px dashed #ccc;
border-radius: 10px;
text-align: center;
line-height: 150px;
font-size: 16px;
color: #999;
margin: 20px auto;
transition: background-color 0.3s;
}
#drop-zone.dragover {
background-color: #f0f0f0;
}

این استایل، به کاربر نشان می‌دهد که منطقه فعال است، زمانی که فایل‌ها در حال کشیدن هستند.

جاوااسکریپت: فعال‌سازی قابلیت کشیدن و رها کردن

در بخش جاوااسکریپت، باید رویدادهای مربوط به کشیدن، رها کردن، و انتخاب فایل را مدیریت کنیم. این رویدادها شامل `dragover`، `dragleave`، و `drop` هستند. در ادامه، نمونه کد جاوااسکریپت برای این قسمت آورده شده است:

javascript  
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
const fileListDisplay = document.getElementById('file-list');
let filesArray = [];
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('dragover');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('dragover');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('dragover');
const droppedFiles = Array.from(e.dataTransfer.files);
handleFiles(droppedFiles);
});
fileInput.addEventListener('change', () => {
handleFiles...  ← ادامه مطلب در magicfile.ir