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


در دنیای توسعه وب، یکی از نیازهای مهم و حیاتی، پیاده‌سازی سیستم‌های آپلود فایل است که بتوانند تجربه کاربری مناسبی را فراهم کنند. یکی از روش‌های جذاب و کاربرپسند، استفاده از نوار پیشرفت (Progress Bar) در حین عملیات آپلود است که کاربران را در جریان وضعیت عملیات قرار می‌دهد و حس رضایت و اعتماد بیشتری به سایت و سیستم می‌دهد. در این مقاله، به صورت جامع و کامل، به جزئیات و مراحل ساخت یک اسکریپت آپلود فایل با نوار پیشرفت با بهره‌گیری از PHP و جاوا اسکریپت خواهیم پرداخت، تا بتوانید پروژه‌های خود را به بهترین شکل ممکن پیاده‌سازی کنید.
پیش‌زمینه و اهمیت پروژه
در بسیاری از وبسایت‌ها و برنامه‌های تحت وب، نیاز است که کاربران فایل‌هایی از جمله تصاویر، ویدئوها، اسناد و دیگر نوع فایل‌ها را به سرور آپلود کنند. این عملیات، در صورت عدم استفاده از نوار پیشرفت، ممکن است کاربران را نگران کند و احساس کنند که فرآیند به درستی انجام نمی‌شود یا سیستم در حال کار است. بنابراین، نمایش وضعیت آپلود، علاوه بر بهبود تجربه کاربری، اعتماد کاربر را به سایت افزایش می‌دهد و همچنین، امکان مدیریت بهتر خطاها و عملیات‌های مربوط به آپلود را فراهم می‌کند.
در این راستا، استفاده از PHP به عنوان زبان سمت سرور و جاوا اسکریپت برای کنترل و نمایش نوار پیشرفت، بهترین ترکیب است که هم امنیت را تضمین می‌کند و هم تعامل کاربر را به صورت بصری بهبود می‌بخشد. در ادامه، مراحل ساخت این سیستم را به تفصیل شرح می‌دهیم.
مرحله اول: طراحی فرم آپلود فایل
در اولین قدم، نیاز است یک فرم HTML ساده طراحی کنیم که کاربر بتواند فایل مورد نظر خود را انتخاب کند و آن را ارسال نماید. این فرم باید شامل یک ورودی نوع فایل (input type="file") باشد. همچنین، برای بهبود کاربرپسندی، دکمه ارسال و یک نوار پیشرفت خالی قرار می‌گیرد. نمونه کد HTML به شکل زیر است:
html  


<form id="uploadForm" enctype="multipart/form-data">


    <input type="file" id="fileInput" name="file" multiple>


    <button type="submit">آپلود فایل</button>


</form>


<div id="progressContainer" style="width: 100%; background-color: #f3f3f3; margin-top: 20px;">


    <div id="progressBar" style="width: 0%; height: 20px; background-color: #4CAF50;"></div>


</div>


<div id="status"></div>

در این کد، یک فرم با شناسه `uploadForm` داریم، که کاربر با انتخاب فایل‌ها، آنها را ارسال می‌کند. نوار پیشرفت درون یک دیو قرار گرفته است و به صورت استایل پایه تنظیم شده است. هدف این است که با ارسال فرم، عملیات آپلود به صورت آژاکس و بدون رفرش صفحه انجام گیرد.
مرحله دوم: نوشتن اسکریپت جاوا اسکریپت برای کنترل عملیات آپلود
در این مرحله، باید یک اسکریپت جاوا اسکریپت بنویسیم که جلوی رفتار پیش‌فرض فرم را بگیرد و عملیات آپلود فایل را به صورت آژاکس انجام دهد. برای این کار، از `XMLHttpRequest` استفاده می‌کنیم، زیرا این شیء قابلیت کنترل کامل بر روی درخواست‌های HTTP دارد و می‌تواند رویدادهای مربوط به پیشرفت عملیات را مدیریت کند.
کد نمونه جاوا اسکریپت:
javascript  


document.getElementById('uploadForm').addEventListener('submit', function(e) {


    e.preventDefault();


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


    const files = fileInput.files;


    const formData = new FormData();
for (let i = 0; i < files.length; i++) {


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


    }
const xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
// رویداد برای کنترل پیشرفت  


    xhr.upload.onprogress = function(e) {


        if (e.lengthComputable) {


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


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


        }


    };
// رویداد پایان عملیات  


    xhr.onload = function() {


        if (xhr.status === 200) {


            document.getElementById('status').innerText ...  ← ادامه مطلب در magicfile.ir