jjrjr1
Posts: 942
|
| Posted: 06/04/2008, 11:09 AM |
|
Hi
Has anyone implemented a file upload progress indicator for the CCS upload file control?
Thanks
_________________
John Real - More CodeCharge Studio Support at - http://CCSElite.com |
 |
 |
ckroon
Posts: 869
|
| Posted: 06/04/2008, 2:29 PM |
|
I haven't....but in case someone wants to give it a go..
This Ajax one comes highly recommended.
http://www.webdice.org/uber_uploader/
_________________
Walter Kempees...you are dearly missed. |
|
|
|
jjrjr1
Posts: 942
|
| Posted: 06/04/2008, 3:02 PM |
|
Hi
I have seen a couple of those but it seems that those Ajax uploaders work outside of CCS meaning that the upload control will not function.
I am working on one and if it works, share it with you.
_________________
John Real - More CodeCharge Studio Support at - http://CCSElite.com |
|
|
|
jjrjr1
Posts: 942
|
| Posted: 06/05/2008, 7:30 AM |
|
Hi
I made an uploading indicator. Could not find an easy way to monitor upload progress in CCS or PHP for that matter. But an animation showing something happening for me is good enough.
One thing I learned is the animated gifs stop animating in IE6 + and some other browsers intermittently after a submit button is clicked. It seems the browsers shut down these gifs after submit and in the case of the upload the animation stops while the file is uploading, making animated gifs useless if you want all browsers to work.
So... What you have to do is create a javascript that will do the animation for you. This process involves creating your own set of images for animation or extract them from an animated gif that you you like. Not hard. If you like, let me know and I will give you a copy on the script i am using along with the animated images.
I have tested this in IE6 & 7, Filefox, Netscape, Opera, & Safari and all works ok in those browsers.
Your next step is to add a layer in the CCS HTML with the property of hidden. Then by issuing a call to a javascript function to unhide, re-position, & start the animation in the onclick client side event for your upload button.
I hope I made this sound simple here because it really is. I just might not be writing this up the best way.
Below is my complete javascript that does this. Using this code, you call progressBarInit() in your onclick event. I thru this together really quickly for a project so I appologize if it is not very clean and commented. If you have any questions, let me know.
Note: in this code the images are called loadingX.gif you can have as many as you need just change the appropriate counters & Limits. Also note this code in addition to making the layer visible it also repositions it. Modify that to what your needs are. Like I said, I jammed this together really quick. It just had to work in one specific application right now. If anyone cleans it up and makes it better, please let me know.
var loadedcolor='green' ; // PROGRESS BAR COLOR
var unloadedcolor='white'; // COLOR OF UNLOADED AREA
var bordercolor='#dddddd'; // COLOR OF THE BORDER
var barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=450; // WIDTH OF THE BAR IN PIXELS
var ns4=(document.layers)?true:false;
var ie4=(document.all)?true:false;
var PBouter;
var PBbckgnd;
var txt='';
if(ns4){
txt+='<table border=0 cellpadding=0 cellspacing=0><tr><td>';
txt+='<ilayer name="PBouter" visibility="hide" height="'+barheight+'" width="'+barwidth+'" top="-545">';
txt+='</br></br><img src="images/loading1.gif" name="loading"></br></br></br><font color="#0000ff">Upating Files</br>Please Wait</font></br></td></tr></ilayer>';
txt+='</table>';
}else{
txt+='<div id="PBouter" onmouseup="hidebar()" style="position:relative; visibility:hidden; top:-545px; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">';
txt+='</br></br><img src="images/loading1.gif" name="loading"></br></br></br><font color="#0000ff" size="3"><strong>Updating Files</br>Please Wait</strong></font></br></br></br></div>';
}
document.write(txt);
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers;
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;
}
return null;
}
function timeimgs(numb) { // Reusable timer
thetimer = setTimeout("imgturn('" +numb+ "')", 200);
}
function imgturn(numb) { // Reusable image turner
if (document.images) {
if (numb == "11") { // This will loop the image
document["loading"].src = eval("loading9.src");
timeimgs('1');
}
else { document["loading"].src = eval("loading" + numb + ".src");
timeimgs(numb = ++numb);
}
}
}
function progressBarInit(){
if (document.images) { // Preloaded images
loading1 = new Image();
loading1.src = "images/loading1.gif";
loading2 = new Image();
loading2.src = "images/loading2.gif";
loading3 = new Image();
loading3.src = "images/loading3.gif";
loading4 = new Image();
loading4.src = "images/loading4.gif";
loading5 = new Image();
loading5.src = "images/loading5.gif";
loading6 = new Image();
loading6.src = "images/loading6.gif";
loading7 = new Image();
loading7.src = "images/loading7.gif";
loading8 = new Image();
loading8.src = "images/loading8.gif";
loading9 = new Image();
loading9.src = "images/loading9.gif";
loading10 = new Image();
loading10.src = "images/loading9.gif";
loading11 = new Image();
loading11.src = "images/loading9.gif";
}
PBouter=(ns4)?findlayer('PBouter',document) ie4)?document.all['PBouter']:document.getElementById('PBouter');
if(ns4)PBouter.visibility="show";
else PBouter.style.visibility="visible";
timeimgs('2');
}
Have Fun
_________________
John Real - More CodeCharge Studio Support at - http://CCSElite.com |
|
|
|
jjrjr1
Posts: 942
|
| Posted: 06/05/2008, 7:32 AM |
|
A note.
The forum above changes the character pattern from to the frown face
in the code above the frown face should be : ( or shoule I say colon (
_________________
John Real - More CodeCharge Studio Support at - http://CCSElite.com |
|
|
|
ckroon
Posts: 869
|
| Posted: 06/05/2008, 8:25 AM |
|
lol that's funy...
Thanks for the code!
_________________
Walter Kempees...you are dearly missed. |
|
|
|
jjrjr1
Posts: 942
|
| Posted: 06/05/2008, 10:13 AM |
|
Hi
If you want to see an example of it working...
Go to http://realtest.biz
Run the video file convert demonstration.
I made some quick format changes in the script and added it there in case you wanted to see it.
Convert some video and you will see the indicator.
Let me know if you have any questions
Take Care.
_________________
John Real - More CodeCharge Studio Support at - http://CCSElite.com |
|
|
|
jjrjr1
Posts: 942
|
| Posted: 06/05/2008, 2:18 PM |
|
Hi again
Just discovered that you need to make a change to this code for Safari compatibility (And probably should be done)
The code that loads the preload images :
if (document.images) { // Preloaded images
loading1 = new Image();
loading1.src = "images/loading1.gif";
loading2 = new Image();
loading2.src = "images/loading2.gif";
loading3 = new Image();
loading3.src = "images/loading3.gif";
loading4 = new Image();
loading4.src = "images/loading4.gif";
loading5 = new Image();
loading5.src = "images/loading5.gif";
loading6 = new Image();
loading6.src = "images/loading6.gif";
loading7 = new Image();
loading7.src = "images/loading7.gif";
loading8 = new Image();
loading8.src = "images/loading8.gif";
loading9 = new Image();
loading9.src = "images/loading9.gif";
loading10 = new Image();
loading10.src = "images/loading9.gif";
loading11 = new Image();
loading11.src = "images/loading9.gif";
should be moved out of the function progressVarInit() and moved to just under the
document.write(txt);
line of code.
Safari implements these objects a little differently than IE, Opera, and firefox.
Sorry....
Make this change and it is browser independant
_________________
John Real - More CodeCharge Studio Support at - http://CCSElite.com |
|
|
|
|
