Importar archivo a servidor y guardar la informacion en una base de datos mysql con php y jQuery

Stay hungry, stay foolish

Steve Jobs


En el post del día de hoy vamos a ver como podemos subir un archivo al servidor para después guardar la información dentro de una base de datos, y lo vamos a hacer utilizando PHP, jQuery y MySQL.

HTML

El formulario HTML que se va a utilizar para subir el archivo al servidor tiene la siguiente estructura

<form id="frmArchivo" method="post">
   <label>Archivo:</label>
   <input id="archivo" type="file" name="archivo" />
   <input type="hidden" name="MAX_FILE_SIZE" value="20000" />
   <input class="boton" type="submit" name="enviar" value="Importar" />
</form>

La información del formulario se va a enviar con el método post. Dentro del formulario tenemos los controles en este caso un input de tipo file para el archivo que se va a subir, un input hidden que indica el tamaño máximo del archivo que se va a subir y el botón de submit para mandar el formulario al servidor.

jQuery

Bien, lo que sigue es crear el código jQuery para mandar con ajax el archivo al servidor. Y lo primero que hacemos es colocar la declaración $document.ready dentro de la etiqueta <head>

$(document).ready(function(){

Posteriormente asignamos el evento submit al formulario el cual obtenemos a través de su atributo id

   $("#frmArchivo").submit(function(){

Ahora creamos una variable llamada datos para almacenar la información del formulario, para esto utilizamos el objeto FormData() que permite crear un conjunto de valores key/valor utilizando el método .append, otra característica es que utiliza el encoding multipart/form-data por lo tanto no es necesario que lo coloquemos enctype=”multipar/form-data” en el HTML del formulario.

      var datos = new FormData();
      datos.append('archivo',$('#archivo')[0].files[0]);

Ahora hacemos la petición ajax con los siguientes valores: el tipo va a ser “POST”, la respuesta del servidor la vamos a obtener como un JSON, la pagina que va a procesar la petición es importar.php, contentType lo ponemos en false para que los datos se envíen con multipart/form-data de lo contrario lo enviaría como “application/x-www-form-urlencoded; charset=UTF-8” que es el valor por default, data con la variable datos que recogió el archivo a enviar y processData a falso para evitar que la información se envíe como una cadena ya que vamos a enviar un archivo. La respuesta del servidor la vamos a recoger en la variable respuesta misma que mostramos con un alert


  $.ajax({
    type:"post",
    dataType:"json",
    url:"importar.php",
    contentType:false,
    data:datos,
    processData:false,
  }).done(function(respuesta){
    alert(respuesta.mensaje);
});

Para que no ejecute el submit del formulario retornamos false y termina el código de jQuery


return false;
});
});

CODIGO PHP

En el archivo importar.php se coloca el siguiente código

Accedemos al archivo utilizando la variable global $_FILES y el nombre con el que se envió, para este ejemplo el nombre es archivo

<?php
$tipo = $_FILES['archivo']['type']; $tamanio = $_FILES['archivo']['size']; $archivotmp = $_FILES['archivo']['tmp_name'];

Creamos la variable que va a contener la respuesta

$respuesta = new stdClass();
$respuesta->mensaje = "";

Evaluamos el tipo de archivo que se subió, para este ejemplo el tipo de archivo permitido es .csv

if( $tipo == 'application/vnd.ms-excel'){

Una vez que se verificó el tipo de archivo lo que hacemos es mover el archivo temporal hacia una carpeta y le asignamos un nombre, nuestro archivo se va a guardar dentro de la carpeta archivos y lo nombraremos alumnos.csv, la ruta y el nombre del archivo puede ser el que ustedes elijan.

   $archivo = "archivos/alumno.csv";

   if(move_uploaded_file($archivotmp, $archivo) ){
      $respuesta->estado = true;
   } else {
      $respuesta->estado = false;
      $respuesta->mensaje = "El archivo no se pudo subir al servidor, inténtalo mas tarde";
   }

Si el archivo se movió con éxito pasamos a leer el contenido para guardar la información que contiene en la base de datos


 if($respuesta->estado){

    /* Se crea la conexión a la base de datos*/
    $conexion = new mysqli('localhost','usuario','password','basedatos',3306);

Almacenamos la información del archivo en la variable $lineas y con un foreach recorremos cada linea, Para obtener cada campo utilizamos la función explode en la cual se busca una coma(,) para separarlos, dicha información se guarda en la variable datos. Posteriormente se crea la consulta de inserción y se ejecuta, si no ocurrió algún error se pasa a la siguiente linea de lo contrario el estado de la respuesta cambia a falso y se agrega al mensaje el registro que no se inserto.

    $lineas = file('archivos/alumno.csv');
    foreach ($lineas as $linea_num => $linea)
    {
       $datos = explode(",",$linea);
       $matricula = trim($datos[0]);
       $paterno = trim($datos[1]);
       $materno = trim($datos[2]);
       $nombre = trim($datos[3]);

       $consulta = "INSERT INTO tblalumno(matricula,paterno, materno, nombre) VALUES('$matricula', '$paterno', '$materno', '$nombre');";
       if(!$conexion->query($consulta)){
          $respuesta->estado = false;
          $respuesta->errormsg .= "El alumno $paterno $materno $nombre no se guardo, verifica la información \n";
       }
    }

Después verificamos si no hubo algún error al leer y guardar la información, si es así el mensaje indicara que todo ocurrió correctamente, también colocamos el else de la primer condición sobre el tipo de archivo en la cual ponemos el mensaje de error correspondiente. Al final se imprime la variable respuesta como json.

    }
    if($respuesta->estado == true)
       $respuesta->mensaje = "Todos los registros se guardaron correctamente\n";
}
else {
   $respuesta->mensaje = "La información no se guardo debido a que solo se admiten archivos .csv\n";
}
 echo json_encode($respuesta);
?>

Eso es todo por hoy, aquí les dejo el link de descarga, si el contenido les es útil denle clic a me gusta a nuestra pagina de Facebook, recomienden el blog y sigan practicando.

download