Foros del Web » Programando para Internet » PHP »

No sé como hacer para subir archivos con php y jquery

Estas en el tema de No sé como hacer para subir archivos con php y jquery en el foro de PHP en Foros del Web. Hola a todos. He leido y releido cosas acerca de como subir archivos a un servidor con jquery, pero el caso es que no sé ...
  #1 (permalink)  
Antiguo 12/01/2012, 03:53
 
Fecha de Ingreso: enero-2008
Mensajes: 27
Antigüedad: 16 años, 2 meses
Puntos: 0
No sé como hacer para subir archivos con php y jquery

Hola a todos.

He leido y releido cosas acerca de como subir archivos a un servidor con jquery, pero el caso es que no sé como adaptarlo a mi sitio web.

Os comento la situación que tengo a ver si alguno de vosotros me puede dar una idea.

Yo tengo mi web (en la que se tratan expedientes) con la siguiente estructura:


Código HTML:
<div id="formulario">
	<!-- Aqui va un formulario con datos de un expediente -->
</div>   
<div id="formgastos">
</div>
<div id="tablagastos">
	<!-- Aqui va una tabla con gastos asociados al expediente -->
</div>
<div id="formhistorial">
</div>
<div id="tablahistorial">
	<!-- Aqui va una tabla con acutaciones que se han realizado sobre el expediente -->
</div> 
Tanto en tablagastos como tablahistorial tengo un botón para agregar nuevos registros, lo que hago es que cuando se pulsa ese botón, se muestran los divs formgasto y formhistorial y se ocultan los divs tablagasto y tablahistorial.

Hasta aquí todo funciona correctamente. El problema lo tengo en que en formhistorial tengo un campo para agregar ficheros adjuntos y aquí es donde tengo el problema. Yo quiero copiar el fichero a una carpeta del servidor y agregar la ruta a la BD, para que luego me muestre el enlace en la tabla que aparece en el div tablahistorial. Pero parece que con jquery esto no se lleva muy bien y cuando hago un var_dump( $_FILES ) no obtengo ningún resultado.

He pensado en hacerlo con una ventana modal, en lugar de como lo hacía de mostrs/ocultar capas, pero también se me lía a la hora de pasarle las variables.

Como veréis, no tengo mucha idea de lo que tengo que hacer.

¿Alguno podría orientarme un poco?

Muchas gracias a todos.

Un saludo.
  #2 (permalink)  
Antiguo 12/01/2012, 10:16
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 17 años, 10 meses
Puntos: 2135
Respuesta: No sé como hacer para subir archivos con php y jquery

El problema según lo que veo es que estas tratando de usar AJAX para ello, y no se puede (todavía) subir archivos con AJAX, por lo que lo más cercano que vas a poder hacer, es "simular" AJAX, usando un iframe oculto.

Saludos.
  #3 (permalink)  
Antiguo 12/01/2012, 11:14
 
Fecha de Ingreso: enero-2008
Mensajes: 27
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: No sé como hacer para subir archivos con php y jquery

Hola GatorV.

Tienes razón en lo que dices, y la opción del iframe la he estado contemplando en varias ocasiones pero es que, como soy novato en esto, no sé como acoplarlo a mi web.

A ver si me puedes echar una mano.

En mi primer mensaje te he puesto la estructura de mi index.php. En este es en donde llamo a tdos los js, css y las clases php.

Cuando agregar un registro, en el que quiero que vaya el adjunto, tengo el siguiente código:

Código HTML:
<?php
session_start();

if (!$_SESSION['usuario_logeado']) {
	header('Location: index.php');
}
else{
    echo var_dump( $_FILES );
    echo var_dump( $_POST );
    if(isset($_POST['submit'])){
            require('classes/historial.class.php');
            $idtarea = htmlspecialchars(trim($_POST['hi_idtarea']));
            $fecha = htmlspecialchars(trim($_POST['hi_fecha']));
            $asunto = htmlspecialchars(trim($_POST['hi_asunto']));
            $adjunto = htmlspecialchars(trim($_FILES['hi_adjunto']['name']));
            echo $adjunto;
            echo $idtarea;
            $nombreFichero = "";
            $errorArchivo = false;
            if ($adjunto != ""){
                //Lo primero que se hace es subir el fichero al servidor.
                //Una vez subido correctamente se guardará el registro en la BD.
                //Variable para crear una carpeta con el número de la tarea para 
                //dejar en ella los adjuntos de cada tarea.
                $nombreCarpeta = 'files/' .$idtarea;
                if (!is_dir($nombreCarpeta)) {
                    mkdir($nombreCarpeta,0777);
                }
                $nombreFichero = 'files/' .$idtarea .'/' .$_FILES['hi_adjunto']['name'];
                if(is_uploaded_file($_FILES['hi_adjunto']['tmp_name'])) { // verifica haya sido cargado el archivo
                    if(move_uploaded_file($_FILES['hi_adjunto']['tmp_name'], $nombreFichero)){ // se coloca en su lugar final            
                        $errorArchivo = false;
                    }
                    else
                        $errorArchivo = true;
                }
                else
                {
                    $errorArchivo = true;
                }
            }
            if (!$errorArchivo){
                $objHistorial=new Historial;
                $fecha=$objHistorial->cambiarFecha($fecha);
                if ($objHistorial->insertar(array($idtarea,$fecha,$asunto,$nombreFichero)) == true){
                        echo 'Datos guardados';
                }else
                        echo 'Se produjo un error. Intente nuevamente';             
            }        
    }
    else
    {
        if(isset($_GET['id'])){
?>
<h3>Nueva Actuación</h3>
<form id="frmHistorialNuevo" name="frmHistorialNuevo" enctype="multipart/form-data" method="post" action="nuevoHistorial.php" onsubmit="GrabarHistorial(); return false">
  <label name="hi_idtarea" id="hi_idtarea" value="<?php echo $_GET['id']?>" visible="hidden" />
  <p>
    <label>Fecha 
        <input class="text" type="text" name="hi_fecha" id="hi_fecha" onBlur="javascript:return validarFecha('hi_fecha')" maxlength="10" value="<?php echo date("j-m-Y")?>" />
    </label>
  </p>
  <p>      
      <label>Asunto
        <input class="text" type="text" name="hi_asunto" id="hi_asunto" maxlength="50" />
      </label>
  </p>
  <p>      
      <label>Adjunto<br />
        <input type="file" name="hi_adjunto" id="hi_adjunto" maxlength="200" value="Examinar..." />
      </label>
  </p>
  <p>
    <input type="submit" name="submit" id="button" value="Enviar" />
    <label></label>
    <input type="button" class="cancelar" name="cancelar" id="cancelar" value="Cancelar" onclick="CancelarHistorial()" />
  </p>
</form>
<?php
        }
    }
}    
?> 
La función GrabarHistorial(), a la que llamo una vez pulsado el botón de submit, la tengo en un archivo js aparte y se define de la siguiente manera:

Código:
    function GrabarHistorial(){
        var idtarea = $('#hi_idtarea').attr('value');
        var fecha = $('#hi_fecha').attr('value');
        var asunto = $('#hi_asunto').attr('value');
        var adjunto = $('#hi_adjunto').attr('value');

        $.ajax({
                url: 'nuevoHistorial.php',
                type: "POST",
                data: "submit=&hi_idtarea="+idtarea+"&hi_fecha="+fecha+"&hi_asunto="+asunto+"&hi_adjunto="+adjunto,
                success: function(datos){
                        ConsultaHistorial(idtarea);
                        alert(datos);
                        $('#formhistorial').hide();
                        $('#tablahistorial').show();
                }
        });
        return false;
    }
Y, por último, el código para la función que inserta el objeto en la base de datos, la tengo definida en una clase y tiene el siguiente código:

Código:
	function insertar($campos){
		if($this->con->conectar()==true){
			$miconsulta = "INSERT INTO historial VALUES (null, ".$campos[0].", '".$campos[1]."','".$campos[2]."','".$campos[3]."')";
			return mysql_query($miconsulta);
		}
	}

Según he podido ver, el iframe debería meterlo en el formluario con el que quiero enviar los datos y ponerle al propio formulario el target apuntando al iframe declarado. He probado esto que te digo, pero sigue sin funcionarme.

¿Crees que el código y la forma de estructurar la web que he escogido es correcta? Espero que la solución sea fácil y que no tenga que cambiar mucho código.

Muchas gracias por vuestra ayuda.

Un saludo.
  #4 (permalink)  
Antiguo 12/01/2012, 12:52
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 17 años, 10 meses
Puntos: 2135
Respuesta: No sé como hacer para subir archivos con php y jquery

Así es, es mejor que busques en el foro de Javascript hay varios ejemplos de como hacer esa simulación de AJAX usando el iframe oculto, también en Google hay muchos ejemplos.

Respecto a lo de cambiar el código, todo depende de lo que encuentres, por ejemplo hay plugins como este o puedes usar algún otro.

Desde PHP recibes el archivo $_FILES de la misma manera.

Saludos.
  #5 (permalink)  
Antiguo 12/01/2012, 13:43
Avatar de pzyrichipz  
Fecha de Ingreso: junio-2010
Ubicación: Metepec, Mexico
Mensajes: 66
Antigüedad: 13 años, 9 meses
Puntos: 5
Respuesta: No sé como hacer para subir archivos con php y jquery

Cita:
Iniciado por GatorV Ver Mensaje
El problema según lo que veo es que estas tratando de usar AJAX para ello, y no se puede (todavía) subir archivos con AJAX, por lo que lo más cercano que vas a poder hacer, es "simular" AJAX, usando un iframe oculto.

Saludos.
Totalmente de acuerdo no puedes subir archivo utilizando ajax por el metodo que POST no lo reconoce muy bien el ajax eso creo me paso una ves peor no no pude subir archivos mediantye ajax te dejo un codigo que ise haber si te sirve



Código PHP:
Ver original
  1. <?php
  2. $name_img = $_FILES["archivo"]["name"];
  3. $ex = explode(".",$name_img);//Extencion del archivo
  4. $ruta_archivo = md5(rand() * time());//encripta el numbre de la imagen
  5.  
  6. echo $nuevo_name_imagen = "$ruta_archivo".$random.".".$ex[1];
  7. $destino_Images="imagenes/";
  8. //subes imagen
  9. if(move_uploaded_file($_FILES['archivo']['tmp_name'],$destino_Images.$nuevo_name_imagen)){
  10.     echo "listo";
  11. }
  12. ?>
  13.  
  14. <form action="" method="POST" enctype="multipart/form-data">
  15.     Archivo: <input name="archivo" type="file">
  16.     <input name="submit" type="submit" value="Upload!">
  17. </form>

Etiquetas: formulario, jquery, registro, tabla, variables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:27.