آپلود فایل با Ajax و درصد پیشرفت قسمت۱
در این مطلب قصد داریم نحوه آپلود با استفاده از ajax زو آموزش بدیم؛ البته از جی کوئری استفاده نکردیم و برای آشنایی بیشتر از جاوااسکریپت خام استفاده کردیم، قسمت بک اند رو هم با php مینویسیم.
کدهای HTML :
برای بخش HTML به فرم ساده برای اپلود فایل ایجاد میکنیم و بخش هایی هم برای نشون دادن مشخصات فایل اپلودی و هم چنین برای قسمت نوار پیشرفت از تگ progress که در HTML5 معرفی شده استفاده کردیم (البته میشه با ترفندی خاص از تگ های دیگه استفاده کرد).
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ | <form id="form1" enctype="multipart/form-data"> <div class="row"> <label for="fileToUpload">Select a File to Upload</label><br /> <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/> </div> <div id="fileName"></div> <div id="fileSize"></div> <div id="fileType"></div> <div class="row"> <input type="button" onclick="uploadFile()" value="Upload" /> </div> <div id="progressNumber"></div> <progress id="prog" min="۰" max="۱۰۰" ></progress> </form> |
خوب فرم توضیح خاصی نداره فقط برای تگ input فایل یه رویداد change تعریف شده که تابع fileSelected رو اجرا میکنه و اینم برای اینکه مشخصات فایل رو دریافت کنیم . نمایش بدیم.و برای تگ دکمه هم بریا رویداد click تابع uploadFile تعریف شده که وظیفه آپلود کردن فایل رو بر عهده داره.
کدهای جاوا اسکریپت :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ | function fileSelected() { var file = document.getElementById('fileToUpload').files[۰]; if (file) { var fileSize = ۰; if (file.size > ۱۰۲۴ * ۱۰۲۴) fileSize = (Math.round(file.size * ۱۰۰ / (۱۰۲۴ * ۱۰۲۴)) / ۱۰۰).toString() + 'MB'; else fileSize = (Math.round(file.size * ۱۰۰ / ۱۰۲۴) / ۱۰۰).toString() + 'KB'; document.getElementById('fileName').innerHTML = 'Name: ' + file.name; document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize; document.getElementById('fileType').innerHTML = 'Type: ' + file.type; } } |
اول فایل انتخاب شده در تگ فایل رو دریافت کردیم و گفتیم اگه فایلی موجود بود اون وقت اندازه فایل (حجم) رو چک کردیم که اندازه رو در واحد مناسب نشون دادیم،بعدش هم در قسمت های مناسب (بخش HTML)اطلاعات فایل رو قرار دادیم.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ | function uploadFile() { var fd = new FormData(); fd.append("fileToUpload", document.getElementById('fileToUpload').files[۰]); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); xhr.open("POST", "upload.php"); xhr.send(fd); } |
خوب این تابع مربوط میشه به کلیک کردن روی دکمه upload که در اینجا اول از همه یک شی جدید از FormData که قابلیت ارسال با ای جکس رو داره ساختیم و بعد فایل مربوطه به تگ فایل رو با متد append بهش اضافه کردیم.بعد یک شی جدید از Ajax ساختیم (XmlHttpRequest) این شی دارای خاصیتی به نام upload هست که میتونیم با رویداد progress برای پیشرفتش یه تابع ایجاد کنیم.متد addEventListener تابع مورد نظر رو به رویداد مورد نظر اضافه میکنه.یعنی میگه با انجام شدن این رویداد این تابع اجرا بشه.بعدشم برای رویداد های مختلف این شی توابع مختلفی معرفی کردیم.برای رویداد load که به معنی انجام شدن کار هست تابع uploadcomplete رو تعریف کریدم و برای رویداد خطا uploadfailed و برای رویداد abort هم uploadCancel تعریف شده که به معنی انصراف کاربر هست.
در نهایت هم نوع ارسال اطلاعات و آدرس اطلاعات رو مشخص کردیم و با متد send شی FormData رو ارسال کردیم.
خوب دوستان عزیز در قسمت بعد چند تابع باقی مونده و بخش PHP رو تکمیل میکنیم.