‫Htm - אחלה טיפים לבניית אתרים » JS‬ http://www.htm.co.il ‫מדריכים ומאמרים בנושא בניית אתרים. כל יום משהו חדש ללמוד, וליישם.‬ Wed, 18 Jan 2012 09:32:13 +0000 http://wordpress.org/?v=2.9.2 il hourly 1 ‫העלאת תמונה בלחיצה אחת fancyUpload‬ http://www.htm.co.il/2009/09/09/%d7%94%d7%a2%d7%9c%d7%90%d7%aa-%d7%aa%d7%9e%d7%95%d7%a0%d7%94-%d7%91%d7%9c%d7%97%d7%99%d7%a6%d7%94-%d7%90%d7%97%d7%aa-fancyupload/ http://www.htm.co.il/2009/09/09/%d7%94%d7%a2%d7%9c%d7%90%d7%aa-%d7%aa%d7%9e%d7%95%d7%a0%d7%94-%d7%91%d7%9c%d7%97%d7%99%d7%a6%d7%94-%d7%90%d7%97%d7%aa-fancyupload/#comments Wed, 09 Sep 2009 08:39:16 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=262

חלק בלתי נפרד מעולם הטפסים הוא האובייקט input מסוג file. מטרתו של אובייקט זה הוא לעלות קבצים מצד הלקוח לצד השרת.
למי שעדיין לא הבין על מה אני מדבר:

הבעיה באובייקט הזה שהוא מאוד מיושן והיכולות שלו מאוד מוגבלות.
במדריך הבא אני אסביר לכם כיצד להחליף את אובייקט העלאת הקבצים באלמנט חכם יותר שמסוגל לעלות כמה קבצים בו זמנית ולתת אינפורמציה בזמן אמת להתקדמות ההעלאה.

כולנו משתמשים באובייקט העלאת הקבצים, אם זה בתור משתמשי קצה – בחשבון המייל שלנו כאשר אנחנו מצרפים קבצים, או בתור בוני אתרים – בתוך מערכות הניהול של האתרים שלנו.

עד היום כולנו השתמשנו באובייקט המיושן input->file מתוך הDOM. החסרונות העיקריים של אובייקט זה הם:

  • אפשרות להעלאה אחת כל פעם
  • לא נותן אינדיקציה להתקדמות ההעלאה
  • אין אפשרות לסנן את סוגי הקבצים אותם אנחנו מעוניינים לקבל

הפתרון שמוצע במאמר זה עולה על החסרונות של האובייקט ה-file המיושן ונותן תחליף שמשלב את ספריית הגאווה-סקריפט mootools ואובייקט פלאש.

פתרון אלגנטי

הפתרון נלקח מתוך האתר digitarald.de בעצם מה שעושים הוא לקחת את הטופס הרגיל עם אובייקט הישן ולהחליף אותו בפלאש, עם שילוב של כמה סקריפטים בגאווה-סקריפט – זה עושה את העבודה.

אני אתן כאן דוגמא למערכת שמעלה תמונות אבל אתם יכולים לקחת את הקוד ולהתאים אותו לכל מטרה.

על מנת להתחיל לעבוד הורידו את קובץ ה-rar מתוך הכפתור "קוד" שנמצא בראש המאמר (כמובן שאתם יכולים לראות את התוצאה הסופית בכפתור "דוגמא").

חלצו את הקבצים מקובץ ה-rar ותקבלו 4 תיקיות וקובץ html אחד.

התיקיות:

  • assets - תקיית התמונות
  • css – מכיל את קובץ style.css
  • server – מכיל את קוד הPHP וקובץ Log ששומר בתוכו לוג לכל העלאה
  • source – מכיל את כל קבצי הJS ובנוסף קובץ פלאש שעתיד להחליף את אובייקט ה-file

טוב עכשיו אחרי שעשינו סקירה מהירה על מה יש לנו נעבור לתכלס

מה עושים?

1. מעלים את כל הקבצים לשרת

2. נותנים הרשאת כתיבה (666) לקובץ הלוג (server->script.log)

3. עורכים את קובץ script.php מתיקיית server

טוב שני שלבים הראשונים ברורים ולכן נעבור לשלב השלישי-

פתחתם את קובץ script.php בתוכנת העריכה האהובה עליכם (אני אוהב את ++notepad, קלה ונוחה), מצאתם את השורות האלה (מתחיל בשורה 115):

1
2
if (!$error && !move_uploaded_file($_FILES['Filedata']['tmp_name'],'../images/' .$_FILES['Filedata']['name'])) {
$error = 'בעיה בהעלאה לשרת';}

מה שבעצם הקוד הזה עושה הוא, לאחר כל הבדיקות הוא רואה שאין error ואז הוא משתמש בפונקצייה move_uploaded_file של PHP.

הפונקציה של php מקבלת שתי פרמטרים. הראשון, מיקום הקובץ הזמני (לאחר שעושים העלאה לקובץ באופן אוטומטי הוא ממומקם בנתיב זמני), אין טעם לשנות אותו. הפרמטר השני, שאותו אתם צריכים לערוך, הוא לאן הקובץ יועתק בשרת שלכם. אני בחרתי את תיקיית images שנמצאת בתיקייה הראשית שלי. כמובן שאני משרשר לפרמטר השני את שם הקובץ וכך הוא ישמר בתיקייה images עם שם הקובץ המקורי.

שימו לב! המיקום שאתם נותנים בפרמטר השני הוא מיקום יחסי לקובץ הPHP! ולא לקובץ הhtml.

זהו זה, עכשיו מעלה הקבצים המשכולל שלכם עובד. אתם מוזמנים לשחק עוד בקובץ script.php גום בקובץ script.js וכך לשנות את ההגדרות לצרכים שלכם.

עוד באותו נושא:

]]> http://www.htm.co.il/2009/09/09/%d7%94%d7%a2%d7%9c%d7%90%d7%aa-%d7%aa%d7%9e%d7%95%d7%a0%d7%94-%d7%91%d7%9c%d7%97%d7%99%d7%a6%d7%94-%d7%90%d7%97%d7%aa-fancyupload/feed/ 10