سلام
این آموزش رو از سایت دوست خوبم حمید تدینی عزیز قرار میدم و با توجه به مفید بودن اون خودنش رو به عزیزان علاقمند پیشنهاد میکنم:
در این بخش آموزشی قصد دارم تا ایجاد یک آپلودر ساده فایل ها رو با Ajax آموزش بدم که در عین سادگی میتونه تمامی نیازهای شما را برآورده نماید . این قسمت آموزشی قابلیت آپلود بصورت Ajax را دارد که همچنین شما میتوانید فایل ها رو بر روی آن با ماوس رها کنید تا عملیات آپلود انجام شود . همچنین شما قابلیت مشخص کردن فایل ها با پسوند مورد علاقه خود برای آپلود را دارید . در ساخت این آموزش از CSS3 و Jquery نیز استفاده شده است .
این اسکریپت از چند فایل تشکیل شده است که در ادامه به توضیح هر کدام از آنها می پردازم …
در بخش سر صفحه نیز من فایل CSS مربوط به اسکریپت را فراخوانی کرده ام :
فایل HTML:
در بخش Body نیز کدهای مربوط به خود فایل و آیتم های موجود در صفحه قرار داده شده است که در فرمی با آی دی upload# آیتم های اصلی ما که کار ارسال فایل برای آپلود در سایت را انجام می دهند قرار دارند . در داخل آن یک div با آی دی drop# قرار دارد که دقیقا همان مکانی است که فایل های درگ شده توسط ماوس باید بر روی آن قرار بگیرند . همچنین یک لیست ul نیز در آنجا وجود دارد که کار اصلی آن این است که فایل هایی را که برای آپلود انتخاب شده اند را لیست نماید . بعنوان مثال این لیست بعد از اضافه شدن یک آیتم به آن می تواند بصورت زیر باشد :
در این قطعه کد یک input قرار دارد که میزان آپلود فایل را نمایش خواهد داد و محتوای آن با استفاده از JQuery پر خواهد شد . همچنین نام فایل و حجم آن هم نمایش داده می شود و در نهایت یک span قرار داده شده است تا موفقیت یا عدم موفقیت آپلود فایل را با استفاده از یک تصویر نمایش دهد .
کد های JQuery:
این کدها دو حالت را برای آپلود فایل ها توسط کاربران در اختیار قرار می دهد :
همچنین برای راه اندازی محتوای این فایل نیاز داشتیم تا فایل اصلی کتابخانه JQuery را نیز وارد نمائیم .
کد های PHP:
بعد از اینکه فایل مورد نظر برای آپلود از یکی از دو روش ممکن ، انتخاب شده و برای آپلود ارسال شد ، کار کدهای PHP برای آپلود آن فایل بر روی سرور اصلی شروع می شود . فایل ارسال شده توسط FILE_$ گرفته شده و با توجه به مسیر مشخص شده در دستور:
و نوع فایل ها که در ابتدا فایل و در آرایه ای با نام allowed$ فایل ها آپلود می گردند .
برگرفته از: http://tadayoni.ir
این آموزش رو از سایت دوست خوبم حمید تدینی عزیز قرار میدم و با توجه به مفید بودن اون خودنش رو به عزیزان علاقمند پیشنهاد میکنم:
در این بخش آموزشی قصد دارم تا ایجاد یک آپلودر ساده فایل ها رو با Ajax آموزش بدم که در عین سادگی میتونه تمامی نیازهای شما را برآورده نماید . این قسمت آموزشی قابلیت آپلود بصورت Ajax را دارد که همچنین شما میتوانید فایل ها رو بر روی آن با ماوس رها کنید تا عملیات آپلود انجام شود . همچنین شما قابلیت مشخص کردن فایل ها با پسوند مورد علاقه خود برای آپلود را دارید . در ساخت این آموزش از CSS3 و Jquery نیز استفاده شده است .
این اسکریپت از چند فایل تشکیل شده است که در ادامه به توضیح هر کدام از آنها می پردازم …
در بخش سر صفحه نیز من فایل CSS مربوط به اسکریپت را فراخوانی کرده ام :
فایل HTML:
کد:
<[URL="http://december.com/html/4/element/meta.html"][COLOR=#2060A0]meta[/COLOR][/URL] [COLOR=#008080]charset[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#C03030]"”utf-8″/"[/COLOR] [COLOR=#000000]/[/COLOR]>
<!– The main CSS file –>
<[URL="http://december.com/html/4/element/link.html"][COLOR=#2060A0]link[/COLOR][/URL] [COLOR=#008080]href[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#C03030]"”assets/css/style.css”"[/COLOR] [COLOR=#008080]rel[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#C03030]"”stylesheet”"[/COLOR] [COLOR=#000000]/[/COLOR]>
کد:
<[URL="http://december.com/html/4/element/ul.html"][COLOR=#2060A0]ul[/COLOR][/URL]>
<[URL="http://december.com/html/4/element/li.html"][COLOR=#2060A0]li[/COLOR][/URL]><[URL="http://december.com/html/4/element/input.html"][COLOR=#2060A0]input[/COLOR][/URL] [COLOR=#008080]type[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#C03030]"text"[/COLOR] [COLOR=#008080]value[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#C03030]"0"[/COLOR] data-[COLOR=#008080]width[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#C03030]"48"[/COLOR] data-[COLOR=#008080]height[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#C03030]"48"[/COLOR] data-fgcolor[COLOR=#000000]=[/COLOR][COLOR=#C03030]"#0788a5"[/COLOR] data-[COLOR=#008080]readonly[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#C03030]"1"[/COLOR] data-[COLOR=#008080]bgcolor[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#C03030]"#3e4043"[/COLOR] [COLOR=#000000]/[/COLOR]>Sunset.jpg <[URL="http://december.com/html/4/element/i.html"][COLOR=#2060A0]i[/COLOR][/URL]>145 KB<[COLOR=#000000]/[/COLOR][URL="http://december.com/html/4/element/i.html"][COLOR=#2060A0]i[/COLOR][/URL]>
<[COLOR=#000000]/[/COLOR][URL="http://december.com/html/4/element/li.html"][COLOR=#2060A0]li[/COLOR][/URL]>
<[COLOR=#000000]/[/COLOR][URL="http://december.com/html/4/element/ul.html"][COLOR=#2060A0]ul[/COLOR][/URL]>کد های JQuery:
این کدها دو حالت را برای آپلود فایل ها توسط کاربران در اختیار قرار می دهد :
- بوسیله کشیدن فایل و رها کردن آن در بخش drop# (در تمامی مرورگرها به غیر از IE)
- با استفاده از دکمه انتخاب فایل که باعث می گردد پنجره ای باز شده و به شما امکان انتخاب فایل مورد نظرتان را بدهد . در این حالت شما می توانید چندین فایل را به یکباره انتخاب و اپلود نمائید .
همچنین برای راه اندازی محتوای این فایل نیاز داشتیم تا فایل اصلی کتابخانه JQuery را نیز وارد نمائیم .
کد های PHP:
بعد از اینکه فایل مورد نظر برای آپلود از یکی از دو روش ممکن ، انتخاب شده و برای آپلود ارسال شد ، کار کدهای PHP برای آپلود آن فایل بر روی سرور اصلی شروع می شود . فایل ارسال شده توسط FILE_$ گرفته شده و با توجه به مسیر مشخص شده در دستور:
کد:
move_uploaded_fileبرگرفته از: http://tadayoni.ir