none
Subir archivos y datos con jquery RRS feed

  • Pregunta

  • Tengo el siguiente formulario:

    <form class="formuploadajax" method="post" enctype="multipart/form-data">
        <input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre">
        <br>
        <input  type="email" id="correo" name="correo" placeholder="Escribe tu correo electronico"/>
        <br>
        <input  type="file" id="archivo" name="archivo"/>
        <br>
        <input type="button" value="Subir archivos" onClick="subirArchivo();"/>
    </form>

    Y tengo los siguientes scripts:

    function subirArchivo()
    {
        var formData = new FormData($(".formuploadajax")[0]);
    
        $.ajax({
          url: '../includes/upload_archivo.php',  
          type: 'POST',
          data: formData,
          cache: false,
          contentType: false,
          processData: false,
          beforeSend: function(){
              $(".cargar-archivo").show();
              $(".cargar-archivo").html("<img src='../img/ajax-loader.gif'>");        
          },
          success: function(data){
            if(data != "error")      
            {
                $(".form-tarea").hide();
                registrarArchivo(data);
            }
            else
            {
                $(".cargar-archivo").hide();
                vex.dialog.alert("Error al subir archivo, intenta de nuevo");
            }
          }
        });
    }
    
    function registrarArchivo(archivo)
    {
        var nombre = $("#nombre").val();
        var correo = $("#correo").val();
    
        $.ajax({
          type: "POST",
          url: "../includes/acciones/archivos/insert_archivo.php",
          data: "nombre=" + nombre + "&correo=" + correo + "&archivo=" + archivo, 
          success: function(data)
          {  
            if(data == 1)
                $(".cargar-archivo").html(archivo);
            else
            {
                $(".cargar-archivo").hide();
                vex.dialog.alert("Error al subir archivo, intenta de nuevo");
            }
          }         
        });
    }   

    upload_archivo.php

    <?php
    $path = '../archivos/';
    
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 
    {
        $ext = strtolower(pathinfo($_FILES['archivo']['name'], PATHINFO_EXTENSION));
    
        $nombre = uniqid(); 
    
        $path = $path.$nombre.".".$ext;
    
        if (move_uploaded_file($_FILES['archivo']['tmp_name'], $path))
        {
           sleep(3);
           echo $nombre.".".$ext;
        }
        else
          echo "error";
    }else{
        echo "error";
    }
    ?>

    insert_archivo.php

    <?php
    include_once("../clases/class.Archivo.php");
    
    extract($_POST);
    # nombre
    # correo
    # archivo
    
    date_default_timezone_set('America/Mexico_City');
    
    $fecha = date("Y-m-d");
    $hora = date("H:i");
    
    $insertar = Archivo::insertArchivo($nombre, $hora, $archivo, $fecha, $hora);
    
    if($insertar > 0)
        echo 1;
    else
        echo 0;
    ?>

    Lo que tengo que hacer aquí es subir un archivo al servidor y el nombre de ese archivo junto con los datos nombre y correo guardarlos en una base de datos.

    Como pueden darse cuenta estoy usando el objeto FormData para mandar el archivo a php y poderlo subir al servidor, pero si observan primer ejecuto el método subirArchivo() qué es el que me sube el archivo, si el archivo se subió correctamente ejecuto el método registrarArchivo() que es el me registra la información en la base de datos.

    La pregunta es si esto que estoy haciendo está bien??. Así como lo tengo si funciona pero tengo la duda si en un solo método puedo mandar a php tanto el archivo a subir como los datos que se tienen que guardar en la base de datos, en lugar de hacerlo en dos métodos.



    • Editado AlexAlonso90 sábado, 3 de noviembre de 2018 19:42
    sábado, 3 de noviembre de 2018 17:21