آپلود فایل با Ajax و درصد پیشرفت قسمت۲
در مطلب قبلی ما بخش HTML این کد رو طراحی کردیم و دوتا از توابع مورد نظر برای بخش جاوااسکریپت رو نوشتیم،در این مطلب ما چند تا تابع دیگه برای بررسی وضعیت آپلود فایل می نویسیم و در نهایت هم کد های بخشPHP که فایل مورد نظر ما رو بر روی سرور ذخیر میکنه،قابل ذکره که نکات امنیتی این فرم رعایت نشده و باید فایل ارسال کاملا اعتبار سنجی بشه.
آپلود فایل
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ | function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * ۱۰۰ / evt.total); document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; document.getElementById('prog').value = percentComplete; } else { document.getElementById('progressNumber').innerHTML = 'unable to compute'; } } |
این تابع در قسمت قبلی به درخواست ایجکس معرفی شده بود و این تابع یه پارامتر ورودی داره که وضعیت آپلود رو مشخص میکنه.evt.loaded مقداری هست که تا الان آپلود شده و evt.total هم مقدار کل آپلود هست که با یه محاسبه ساده درصد اون محاسبه شده و در مکان مناسب در HTML به نمایش در میاد،مقدار هر لحظه هم به خاصیت value تگ progress ما اضافه میشه.
نتیجه برگشتی از سرور
۱ ۲ ۳ | function uploadComplete(evt) { alert(evt.target.responseText); } |
خوب با این تابع هم ما نتیجه برگشتی از سرور رو به کاربر نشون میدیم ،اینجا برای تست ما اون به صورت پیغام نشون دادیم ولی خوب شما میتونید مثلا به بخش HTML رو مبنی موفقیت آمیز بودن آپلود نشون کاربر بدید و خلاصه کارهای دیگه که میشه انجام داد.
خطا در ارسال
۱ ۲ ۳ ۴ ۵ ۶ | function uploadFailed(evt) { alert("There was an error attempting to upload the file."); } function uploadCanceled(evt) { alert("The upload has been canceled by the user or the browser dropped the connection."); } |
با این دو تا تابع هم میتونید خطای اتفاق افتاده رو مدیریت کنید نشون دادن پیغام به کاربر و کار های دیگه؛تابع UploadCanceled هم وقتی اجرا میشه که خود کاربر عملیات رو متوقف کنه.
کد های PHP
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ | $path='uploads/'; if(isset($_FILES['fileToUpload']) && $_FILES['fileToUpload']['name']!='') { $file=$_FILES['fileToUpload']; $file_name=$file['name']; move_uploaded_file($file['tmp_name'],$path.$file_name); die('فایل با موفقیت آپلود شد'); } |
کد های PHP رو ساده نوشتیم و نخواستیم مسائل امنیتی چک کردن فایل و انتخاب نام های تصادفی رو براش بنویسیم،او از همه چک کردیم که آیا فایل ارسال شده یا نه اگه ارسال شده اونو داخل متغییر file$ ذخیره کردیم،بعد نام فایل رو داخل file_name$ قرار دادیم و بعدش اونو به مکان مناسب که خودتون انتخاب میکنید منتقل کردیم و در نهایت هم پیغام فایل با موفقیت آپلود شد رو برای سمت کلاینت ارسال کردیم،حالا شما میتونید قسمت های دلخواه خودتون رو هم بهش اضافه کنید.
