SitePoint Sponsor |
|
User Tag List
Results 1 to 1 of 1
Thread: Image Preview Problem
-
Aug 29, 2007, 07:29 #1
- Join Date
- Aug 2007
- Posts
- 1
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Image Preview Problem
Hi,
I am trying to write an Ajax Image preloader that reacts to the key event of a File Input control. When I try to debug the code in Firefox, it does show the the uploaded image source is referenced as expected but for some reason the image itself does not seem to appear and I would appreciate it if someone could please help me with information on how to fix this delimma. I have included my code below for your convenience.
thanks in Advance,
Dollarjunkie ( Javascript Newbie)
Code:ImagePreload.ImagePreloadBehavior = function(element) { ImagePreload.ImagePreloadBehavior.initializeBase(this, [element]); // TODO : (Step 1) Add your property variables here // this._TargetImageIDValue = null; // Change TargetButtonID to TargetImageButtonID this._FileUploadTextValue = null; this._FileTypesValue = ["bmp","gif","png","jpg","jpeg"]; this._MaxWidthValue = 300; this._MaxHeightValue=250; this._DefaultImageValue ='/images/spacer.gif'; } ImagePreload.ImagePreloadBehavior.prototype = { initialize : function() { ImagePreload.ImagePreloadBehavior.callBaseMethod(this, 'initialize'); $addHandler(this.get_element(), 'keyup',Function.createDelegate(this, this._onkeyup)); this._onkeyup(); // TODO: add your initalization code here }, _onkeyup : function() { var e = $get(this._TargetImageIDValue);// Get the ID of the image that we want to work with if (e) // There is an image Object Specified for this transaction { var NoFileUploadSource = ("" == this.get_element().value);//Boolean value TRUE OF FALSE IN THIS CASE for the value of the FILEUPLOAD BUTTON //e.visible = DefaultImageSpecified;// SET THE VALUE OF THE Image TO THE RETURNED BOOLEAN if (this._DefaultImage) // IF THIS RESOLVES TO TRUE { if (NoFileUploadSource) //IF DISABLED EARLIER { this._oldValue = e.src; e.src = this._DefaultImageValue; } else { if (this._oldValue) { e.src = this._oldValue; } } } if( !NoFileUploadSource) { var source=this.get_element().value;//get the name of the file var ext= source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase(); var extArray = this._FileTypesValue; for (var i=0; i<extArray.length; i++) if (extArray[i]==ext) break; //globalPic = new Image(); if (i < extArray.length) { //3) IF a VALID IMAGE IS SPECIFIED, IMAGE SHOULD LOAD THE IMAGE e.src=source; } else { e.src=this._DefaultImageValue; // 2) If an Invalid picture if specified, IMAGE SHOULD BE DISABLED AND An ALERT DISPLAYED alert("THAT IS NOT A VALID IMAGE\nPlease image with one of the following extentions :\n\n"+this.Filetypes.join(", ")); } var x = parseInt(e.width); var y = parseInt(e.height); if (x > this._MaxWidth) { y*=this._MaxWidth/x; x=this._MaxWidth; } if (y> this._MaxHeight) { x*= this._MaxHeight/y; y= this._MaxHeight; } e.style.display=(x<1 || y<1)?"block":""; } } else { // alert coder that image object is missing alert("Please specify an image object to be used for the previewing"); } }, dispose : function() { // TODO: add your cleanup code here ImagePreload.ImagePreloadBehavior.callBaseMethod(this, 'dispose'); }, // TODO: (Step 2) Add your property accessors here // //Property for the TargetImageIDValue get_TargetImageID : function() { return this._TargetImageIDValue; }, set_TargetImageID : function(value) { this._TargetImageIDValue = value; }, //Properties for the get_FileUploadText : function() { return this._FileUploadTextValue; }, set_FileUploadText : function(value) { this._FileUploadTextValue = value; }, //Acceptable File Types get_FileTypes : function() { return this._FileTypesValue; }, //MaxWidth of images to Load get_MaxWidth : function() { return this._MaxWidthValue; }, set_MaxWidth : function(value) { this._MaxWidthValue= value; }, //Set MaxHeight for images to load get_MaxHeight : function() { return this._MaxHeightValue; }, set_MaxHeight : function(value) { this._MaxHeightValue = value; }, // The Default Picture to Load when there is No picture available get_DefaultImage : function() { return this._DefaultImageValue; }, set_DefaultImage : function(value) { this._DefaultImageValue = value; }, }
Bookmarks