Script ara subir archivo con ajax

kaninox · #1 (**permalink**) 14/07/2011, 16:56

Hola muchachos, he estado probando como subir archivos con ajax y pues me he encontrado con infinidad de script que lo hacen pero con muchos archivos y me encontre este que funciona muy bien, al menos para mi caso.

Código PHP:

Ver original<?php
if($_FILES['archivo']){
    if(10240000 > $_FILES['archivo']['size']){
        $tmp = $_FILES['archivo']['tmp_name']; 
        $name = $_FILES['archivo']['name'];
        $name = "tucarpeta/$name";
        if(move_uploaded_file($tmp, $name)){
            echo '
            <script>
            parent.document.getElementById("loading").style.display="none";
            parent.document.getElementById("mensaje").innerHTML="Archivo grabado correctamente";
            old_f=parent.document.getElementById("archivo");
            new_f=parent.document.createElement("input");
            new_f.type="file";
            new_f.name="archivo";
            new_f.value="";
            new_f.id="archivo";
               new_f.onchange=function(){
                parent.document.getElementById("mensaje").innerHTML="";
            }
            old_f.parentNode.replaceChild(new_f,old_f);
            </script>';
            exit;
        }
    }
echo '
            <script>
            parent.document.getElementById("loading").style.display="none";
            parent.document.getElementById("mensaje").innerHTML="El archivo no pudo grabarse.";
            old_f=parent.document.getElementById("archivo");
            new_f=parent.document.createElement("input");
            new_f.type="file";
            new_f.name="archivo";
            new_f.value="";
            new_f.id="archivo";
               new_f.onchange=function(){
                parent.document.getElementById("mensaje").innerHTML="";
            }
            old_f.parentNode.replaceChild(new_f,old_f);
            </script>';
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
</head>
<body>
<?php echo "$_POST[archivo] - $_GET[archivo]";?>
<form target="pepe" method="post" enctype="multipart/form-data" action="<?php echo basename($_SERVER['PHP_SELF'])?>" onsubmit="if(document.getElementById('archivo').value.length)document.getElementById('loading').style.display='inline'">
<div id="mensaje" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:red; font-size:9px"></div>
<input type="file" name="archivo" id="archivo" size="26" class="campoArchivo" onchange="document.getElementById('mensaje').innerHTML=''" />
<input type="submit" value="Cargar archivo" /><img id="loading" src="?LOADING" width="16" height="16" style="display:none" />
</form>
<iframe name="pepe" width="1" height="1" style="visibility:hidden">aaa</iframe>
</body>
</html>

el script funciona bien el problema es que necesito agregar este archivo file en un formulario que tengo con otros scripts ajaxs, y con otro tipo de funcion para enviar via onsubmit, la funcion que ocupo es esta

Código Javascript:

Ver original<script type="text/javascript">
function form103(){var params = Form.serialize($('formulario_103'));
new Ajax.Updater('bodychange', 'formulario_103.php', {asynchronous:true, parameters:params, evalScripts: true, onCreate: function() {toggleLoader(false);},
onComplete: function(){
toggleLoader(true);
 if($('cfx')){
    new Effect.Pulsate('cfx', { pulses: 4, duration: 1.8, queue: {scope: 'cfxscope'}});  
 }
 if($('cfa')){
    new Effect.Pulsate('cfa', { pulses: 4, duration: 1.8, queue: {scope: 'cfascope'}});    
    new Effect.Fade('cfa', { duration: 7.0, queue: {position: 'end', scope: 'cfascope'} });
 }
}
});}
 
function toggleLoader(show) {  
$('ContenidoFormulario')[show ? 'show' : 'hide']();
$('ContenidoCargando')[!show ? 'show' : 'hide']();
}
</script>

y su form es :

Código PHP:

Ver original<form name="formulario" enctype="multipart/form-data" id="formulario_103" method="post" action="formulario_103.php" onsubmit="form103();return false;" style="margin:0;padding:0;">

y yo necesito saber como o donde tendría que agregar esto :

Código PHP:

Ver originalif(document.getElementById('archivo').value.length)document.getElementById('loading').style.display='inline';

lo he tratado de agregar directamente en el script despues de los cfa, y me sube la imagen pero ya no me ejecuta el ajax, digo me tira mi pagina como parent y me la saca, no se si me explico, esta pagina la cargo en una capa y al agregar este codigo me ejecuta la pagina no en la capa si no que completamente y ya no me sirve :/ alguna ayuda, estoy usando a todo esto prototype y scriptaculous.

Saludos.