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

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

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

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

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

בניית תצוגה מקדימה (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;
}

התוצאה

סיכום

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