הצגת תמונה בהעלאה בטופס של אלמנטור

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

קודם נגרור ווידג’ט מסוג תמונה, ניתן לה קלאס – my-img

לאחר מכן בטופס של אלמנטור, בשדה של העלאת קבצים, בלשונית מתקדם, ניתן מזהה (ID) – myupload

ולסיום נוסיף את הקוד הבא

				
					<script>
    let mypic = document.querySelector(".my-img img");
    let myupload = document.querySelector("#form-field-myupload");
    myupload.onchange = function(){
        mypic.src = URL.createObjectURL(myupload.files[0]);
        mypic.srcset = URL.createObjectURL(myupload.files[0]);
    }
</script>
				
			

ככה זה נראה 🙂

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פעם בשבוע אני שולח ניוזלטר
עם כל המאמרים החדשים באתר
מעניין אותך?