[jQuery] using jquery for ajaxian upload progressbar with php

[jQuery] using jquery for ajaxian upload progressbar with php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
<BODY>
<DIV><SPAN class=878194016-09032006><FONT face=Arial size=2>Hi
!</FONT></SPAN></DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Arial size=2>I attack again with
some doubts... :)</FONT></SPAN></DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Arial size=2>I'm trying to
implement a upload progressbar mixing some ideas I read: multiple files upload
with "same" input field [1], php + perl to allow control the raw post data
uploaded[2], real-time upload using js + hidden iframes[2]... the test script
i'm working in is visible at <A
href="http://www.obolog.com/upload.php">http://www.obolog.com/upload.php</A> .
</FONT></SPAN></DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Arial size=2>You could see that
every time you select a file, I hide the field, and create another one for
selecting a new file, and add a <li> with the name & path to the
selected file. Later, when you click to "Send", I disable the fields and submit
button , and send a continous ajax request to a script that returns a "load
bar" with the percent loaded ( with a 500ms timeout), in base to the total post
raw data. Finally, when the upload is complete, I hide the files list, and
enable the fields again, all without reload the main page. </FONT></SPAN></DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Arial size=2>Ok, it's cool, but
only is working in Firefox... :( . Do you know if there is some limitations with
the ajax funcions or the fact I'm doing a recursive request every 500ms to the
progressbar script? You can see source code at the above url.
</FONT></SPAN></DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Arial size=2>The functions i'm
using looks like this:</FONT></SPAN></DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Courier size=2>function
postIt()    //Send the
form<BR>{<BR> document.forms[0].submit();<BR> <BR> $('#upload_results').load("ajax_process.php?action=upload_progressbar&sid=<?=$sid?>",<BR>  function()<BR>  {<BR>   $('#load_image').show("fast");<BR>   $('#upload_results').show("fast");<BR>   $("#file_inputs
input[@type='file']").set("disabled",
"disabled");<BR>   $("#Submit").set("disabled","disabled");<BR>   setTimeout(
'getProgressBar()', 500 );<BR>  }<BR> );<BR>}</FONT></SPAN></DIV>
<DIV><FONT face=Courier></FONT> </DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Courier size=2>function
getProgressBar()    //Load progressbar from external
script<BR>{<BR> $('#upload_results').load("ajax_process.php?action=upload_progressbar&sid=<?=$sid?>",<BR>  function()<BR>  {<BR>   if
( $('#upload_results').get(0).innerHTML == "..."
)<BR>   {<BR>    $('#load_image').hide();<BR>    $("#Submit").get(0).disabled
=
false;<BR>    $('#upload_results').hide();<BR>    $("#file_inputs
input[@type='file']").remove();<BR>    addFileInput( false
);<BR>    $("#file_list
li").hide("slow");<BR>    $("#file_list
li").remove();<BR>   }else{<BR>    setTimeout(
'getProgressBar()', 500
);<BR>   }<BR>  }<BR> );<BR>}</FONT></SPAN></DIV>
<DIV><FONT face=Courier></FONT> </DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Courier size=2>function
addFileInput( elem ) {    //add input field to form and hide
last<BR>  if ( false != elem
)<BR>  {<BR>   $(elem).hide();<BR>   $("#file_list").append("<li
style='display:none'>"+($("#file_list li").size()+1)+".-
"+elem.value+"</li>");<BR>   $("#file_list
li:last").slideDown("slow");<BR>  }<BR>  $("#Submit").get(0).disabled
= false;<BR>  $("#file_inputs").append('<input
name="file'+($("#file_list li").size()+1)+'" type="file"
id="file'+($("#file_list li").size()+1)+'" size="35"
onChange="addFileInput(this);">');</FONT></SPAN></DIV>
<DIV><FONT face=Courier></FONT> </DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Courier
size=2>}</FONT></SPAN></DIV>
<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
<DIV><SPAN class=878194016-09032006><FONT face=Arial
size=2></FONT></SPAN> </DIV></BLOCKQUOTE>
<DIV><SPAN class=878194016-09032006><FONT face=Arial size=2>Thanks in advance
for your time...</FONT></SPAN></DIV>
<DIV><SPAN class=878194016-09032006><FONT face=Arial
size=2></FONT></SPAN> </DIV>
<STYLE>
<!--
A.special_link { TEXT-DECORATION:none; COLOR: #4e81c4}
A:hover { TEXT-DECORATION: underline }
A.special_link:hover { COLOR: #999999 }
A.brand { COLOR: #777777; FONT-SIZE: 7pt; TEXT-DECORATION: none }
.normal_txt { FONT-FAMILY: Verdana,Arial,fixed; FONT-SIZE: 8pt; COLOR: #4e81c4; }
.small_txt { FONT-FAMILY: Verdana,Arial,fixed; FONT-SIZE: 7pt; color:#777; text-align:justify; width:650px;}
.logotext { TEXT-DECORATION: none; FONT-SIZE: 10pt; COLOR: #ffffff; }
.main_table { FONT-FAMILY: Verdana,Arial,fixed; BORDER-RIGHT: #355D91 1px solid; BORDER-TOP: #ADC2DD 1px solid; BORDER-LEFT: #ADC2DD 1px solid; BORDER-BOTTOM: #355D91 1px solid }
-->
</STYLE>
<TABLE class=main_table cellSpacing=0 cellPadding=2 width=650 border=0>
<TBODY>
<TR bgColor=#4e81c4>
<TD class=logotext width=308><IMG src="cid:878194016@09032006-22FE"
border=0></TD>
<TD class=normal_txt align=right><A class=special_link
style="COLOR: #ffffff" href="http://www.softonic.com/" target=_blank>Where
Software Lives</A></TD></TR>
<TR class=normal_txt vAlign=top>
<TD><B>Albert García</B><BR><I>Analista-Programador</I></TD>
<TD align=right><STRONG>Softonic International </STRONG><BR>C/Sant
Francesc 4, 2ª planta <BR>Cerdanyola del Vallès, CP 08290, Barcelona (ES)
</TD></TR>
<TR class=normal_txt>
<TD colSpan=2>
<TABLE cellSpacing=0 cellPadding=0 align=right border=0>
<TBODY>
<TR class=normal_txt>
<TD align=right>tel: <BR>fax: </TD>
<TD noWrap>+34 935920115<BR>+34 933969292</TD></TR></TBODY></TABLE><A
class=special_link href="mailto:albert.garcia@softonic.com"
target=_blank>albert.garcia@softonic.com</A><BR><A class=special_link
href="http://www.softonic.com%20/">http://www.softonic.com</A></TD></TR></TBODY></TABLE>
<DIV class=small_txt>Este mensaje y los documentos que, en su caso, lleve
anexos, pueden contener información confidencial. Por ello, se informa a quien
lo reciba por error que la información contenida en el mismo es reservada, y su
uso no autorizado está prohibido legalmente, por lo que en tal caso le rogamos
que nos lo comunique por la misma vía o por teléfono, se abstenga de realizar
copias o remitirlo o entregarlo a terceras personas y proceda a borrarlo de
inmediato</DIV>
<DIV> </DIV></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/