רכיב פלאש חינמי להעלאת קבצים

שלום לכולם,

אתם בטח מכירים את רכיב ה-FileUpload שמגיע מובנה עם Asp.Net, אם אתם עדיין בAsp קלאסי, אז אתם בטח מכירים של AspUpload או כל מיני אחרים שמוצעים היום בשוק.

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

איך הרכיב נראה?
ובכן, הרכיב הוא בעצם קובץ Swf ברוחב של 350 פיקסלים ובגובה של 116 פיקסלים.
יכול להתאים לכל אתר או מערכת ניהול שאתם בונים.

1

(צילום מסך)

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

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

אבטחה
אם אתם מקבלים שגיאת אבטחה, אתם צריכים להוסיף קובץ שנקרא CrossDomain.xml ל-Root של הדומיין שאליו אתם רוצים להעלות את הקבצים.

דרך אגב, אם מישהו רוצה (וזה ממש חשוב לו) את הרכיב הזה בלי הלוגו שלי :-( , שלחו מייל ואשלח אליכם גרסה ללא הלוגו שלי.
המייל שלי הוא avi.kenso@gmail.com

כל דבר, מדיווחי באגים ועד הצעות לשיפורים יתקבלו בברכה, באמת שאשמח לשמוע כל דבר שתגידו. אבל בבקשה תגידו דברים טובים :-)

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

שילוב Flash בדף Html מבלי מסגרת

כמה פעמים נדרשנו לשלב באנר פלאש או כל אובייקט פלאש אחר בדף HTML? כנראה שהמון פעמים,

שיטות לשילוב Flash בדף Html

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

במיוחד בשביל זה, יש לי פונקציה ב-Javascript שאני משלב אותו בדף בכל מקום שבו אני רוצה לשלב פלאש. כך, אני לא מקבל מסגרת מסביב לפלאש, יכול לשלב גם HTML וכו'.

נגיע להכל, אבל קודם כל, הנה הפונקציה. (מימוש שלה בדף)

//WriteFlashObj(sSrc,sWidth,sHeight,bTrans,sFlashVars,sID)
WriteFlashObj('images/bannerHosts/193×219.swf','193px','219px',false,",'BannerFlash')

אוקיי,
נסביר את הפרמטרים:

sSrc – מיקום הקובץ הפיזי (swf) של הפלאש
sWidth – רוחב הפלאש
sHeight – גובה הפלאש
bTrans – נתון בוליאני האם הפלאש יוטמע כשקוף או לא
sFlashVars – אם אנחנו רוצים להוסיף Variables, פחות רלוונטי לבאנרים
sID -זיהוי של האובייקט בדף, ניתן גם לגשת אליו בDocument.getElementById

אוקיי, ועכשיו לפונקציה עצמה

   1: function DocumentWrite(sHtml)
   2: {
   3:     document.writeln(sHtml);
   4: }
   5: ///write flash into the html
   6: function WriteFlashObj(sSrc,sWidth,sHeight,bTrans,sFlashVars,sID)
   7: {
   8:     var sObj = "";
   9:     var sWMode = "";
  10:     var sObjID = sSrc.replace(".swf","");
  11:     var sVars = "";
  12:     var sPrfx = "?";
  13:     if(sFlashVars){
  14:         sVars = sFlashVars;
  15:     }
  16:     if(sID){
  17:         sObjID = sID;
  18:     }else{
  19:         sObjID = sSrc.replace(".swf","");
  20:     }
  21:     sObj = sObj+"<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab' width='"+sWidth+"' height='"+sHeight+"' id='"+sObjID+"' align='middle' VIEWASTEXT>";
  22:     sObj = sObj+"<param name='allowScriptAccess' value='sameDomain' />";
  23:     sObj = sObj+"<param name='movie' value='"+sSrc+"' />";
  24:     sObj = sObj+"<param name='quality' value='high' />";
  25:     sObj = sObj+"<param name='bgcolor' value='#ffffff' />";
  26:     sObj = sObj+"<param name='flashvars' value='"+sVars+"' />";
  27:     if(bTrans == true){
  28:         sObj = sObj+"<PARAM NAME='WMode' VALUE='Transparent'>";
  29:         sWMode = "wmode='transparent'";
  30:     }
  31:     sObj = sObj+"<embed src='"+sSrc+"' flashvars='"+sVars+"' quality='high' bgcolor='#ffffff' "+sWMode+" width='"+sWidth+"' height='"+sHeight+"' ID='"+sObjID+"' NAME='bg' align='middle' allowScriptAccess='sameDomain' swLiveConnect=true ID='bg' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' />";
  32:     sObj = sObj+"</object>";
  33:
  34:     DocumentWrite(sObj);
  35: }

לא לדאוג, אם לא ניתן לקרוא, אני אצרף לינק לקובץ js שיהיה קריא מאוד :-)

הנה הוא כאן

אוקיי, עכשיו ניתן להוסיף פלאשים לדף כמה שרוצים :-)

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

בהצלחה, וכרגיל, אשמח לשמוע תגובות.