העלאת תמונה בלחיצה אחת fancyUpload

 

חלק בלתי נפרד מעולם הטפסים הוא האובייקט 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/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

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

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
איתיNo Gravatar 10 בספטמבר

צורם לי בעין (מאוד) שהמילה mootools לא מוזכרת אפילו פעם אחת כאן.

[תגובה]

אורן רוטNo Gravatar 11 בספטמבר

איתי אני חושב שטעות בידך:

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

[תגובה]

אביעדNo Gravatar 1 באוקטובר

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

[תגובה]

אביעדNo Gravatar 1 באוקטובר

בנוסף יש עוד בעיה מאוד מוזרה בסקריפט הזה, כל עוד אני משאיר את הקישור לשרת שלכם לscript.php בform action, הסקריפט עובד, כלומר הוא מראה את הבאר של ההעלאה. לעומת זאת כשאני משנה את הקישור לקובץ הscript.php שנמצא על השרת שלי ולא על שלכם, משום מה הסקריפט פשוט נתקע על ההתחלה, כלומר הוא אפילו לא מנסה להעלות והוא לא מראה את הבאר הכחול שמתמלא.

[תגובה]

אורן רוטNo Gravatar 4 באוקטובר

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

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

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

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

[תגובה]

אמירNo Gravatar 15 בפברואר

זה לא עובד ! הוא כותב:
קרתה תקלה: {"status":"0","error":"\u05d1\u05e2\u05d9\u05d4 \u05d1\u05d4\u05e2\u05dc\u05d0\u05d4 \u05dc\u05e9\u05e8\u05ea"}

[תגובה]

אורן רוט

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

אתה מוזמן לנסות בשרת שלך…

[תגובה]

אמיר

ניסתי,
זה לא עובד
http://work.bernoedit.co.il/canda/i/build.html

[תגובה]

אורן רוט

אוקיי הטעות היא שהשארת את הקישורים הפנימיים לאתר שלי. תעבור על הקבצים ותשנה כל לינק שמופיע בו htm.co.il לקישור יחסי לאתר שלך, כך זה יעבוד.

אמירNo Gravatar 15 בפברואר

הנה שניתי,
http://work.bernoedit.co.il/canda/i/build.html
זה עדיין לא עובד..

[תגובה]

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון