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

לוגו של טלגרם הצטרפו לערוץ הטלגרם וקבלו עדכון כאשר מאמר חדש מתפרסם!

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

הוספת תצוגה מקדימה לטופס

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

בניית תצוגה מקדימה (HTML)

הקוד הבא הוא קוד די סטנדרטי, הוא מכיל תגית <img> שתתפקד בתור התצוגה המקדימה של התמונה אשר המשתמש בחר, ואת הטופס עצמו אשר כולל שדה מסוג העלאת קובץ.

<div class="image-preview">
  <strong>Preview:</strong>
  <img src="" alt="" id="dorzki-preview">
</div>
<div class="image-upload">
  <form action="#" method="post" enctype="multipart/form-data">
    <label for="dorzki-image">Upload Image:</label>
    <input type="file" id="dorzki-image" name="dorzki-image" accept=".jpg,.jpeg,.png">
    <button type="submit">Upload!</button>
  </form>
</div>

פונקציונליות של תצוגה מקדימה

פה קורה כל הקסם, מה שאנו עושים פה זה שאנחנו אומרים לדפדפן להאזין לשינויים בשדה העלאת הקובץ, ככה שכאשר בוחרים קובץ כלשהו, הקוד ירוץ.
כאשר המשתמש בוחר תמונה, אנו בודקים קודם כל שהוא באמת בחר תמונה, ולא סתם ביטל בחירה.
לאחר מכן אנחנו משתמשים ב-FileReader, על מנת שנוכל לגשם בצורה אסינכרונית לקבצי המשתמש (בדוגמא שלנו לקובץ אשר הגולש בחר), ואז אנו קוראים את הקובץ מהמחשב הגולש וממירים אותו ל-Data URL.
לבסוף אנו לוקחים את התמונה שהומרה ל-Data URL ומזריקים אותה לתגית ה-<img> שיצרנו בשלב הקודם.

( function( $ ) {

	$( '#dorzki-image' ).on( 'change', function() {

		if( ! this.files || this.files.length === 0 ) {
			return;
		}
    
		var fr = new FileReader();
    
		fr.readAsDataURL( this.files[0] );
    
		fr.onload = function( e ) {
    
			$( '#dorzki-preview' ).attr( 'src', e.target.result );
    
		}
  
	} );

} )( jQuery );

קוד CSS (אופציונלי)

הקוד הזה הוא אופציונלי, הוא מאפשר לנו פשוט להציג מעין מסגרת ריקה ומקווקוות (Dashed) כאשר הערך src של תגית <img> הוא ריק, זה משהו שהוא נטו בשביל חוויות המשתמש.

.image-preview img {
  border-radius: 4px;
  display: block;
  width: 100%;
}

.image-preview img[src=""] {
  border: 4px dashed #000;
  height: 260px;
}

התוצאה

סיכום

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

דור צוברי

מתכנת מגיל 13, ומתעסק עם וורדפרס מגיל 18, אוהב לפצח אתגרים ולפתח דברים מורכבים על בסיס וורדפרס. עצמאי מגיל 16, מרצה ובלוגר. בזמן הפנוי שלי אוהב מאוד לקרוא קומיקס של MARVEL.

דור צוברי

תגובות לפוסט

כתיבת תגובה

תגובה אחת

  1. רענן

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

    1. מחבר
      דור צוברי

      היי רענן,
      לא הבנתי כל כך למה אתה מתכוון.

    2. רענן

      אם אתה מגיע לטופס כשאתה גולש בפייסבוק זא מתוך הדפדפן שלהם כביכול העלאת תמונה כאן ואגב גם בcf7 לא עובדת כמתוכנן…כפתור העלאת תמונה חסום (:

    3. מחבר
      דור צוברי

      היי רענן, יש לך דוגמא שאוכל לבדוק?

    4. רענן

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

    5. מחבר
      דור צוברי

      היי רענן 🙂
      זה ידוע שהדפדפן של פייסבוק חוסם או לא תומך בחלק מהתקנים של היום.

      למרות שזה מוזר כי לדעתי הדפדפן של פייסבוק נשען על הדפדפן של כרום.

  2. עטרה

    מאמר ברור בהיר ומסודר, כמו כל המאמרים בבלוג כאן.

    1. מחבר
      דור צוברי

      תודה רבה עטרה 🙂

  3. בנימין

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

    האם תוכל להכין דוגמא עובדת בוורדפרס?

    1. מחבר
      דור צוברי

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

      ממליץ לך לנסות לשחק עם קוד ה-JavaScript, כנראה ששם משהו לא מסתדר לך.

  4. אלדד

    מאמר מושלם.
    כתוב עם הסבר ברור ונוח.

    תודה רבה !

    1. מחבר
      דור צוברי

      היי אלדד,
      תודה רבה, שמח לשמוע! 🙂

      מזמין אותך להירשם לעדכונים בטלגרם או בניוזלטר 🙂