Skip to content

Commit 8abd4b3

Browse files
DesarrolloWebyTutorialesDesarrolloWebyTutoriales
committed
subir archivo php, mysql y jquery ajax
0 parents  commit 8abd4b3

File tree

9 files changed

+342
-0
lines changed

9 files changed

+342
-0
lines changed

‎archivo excel/agenda.csv

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Nombres,Apellidos,Direccion,Celular,E-mail
2+
juan,contreras,la marina,987789521,juancontreras@gmail.com
3+
adriana,angelina,san isisdro,956854124,adriana.angelina@gmail.com
4+
fatro,piroue,sjm,987654421,fatropinto@gmail.com
5+
natalia,vergara,calle prueba,958745122,nataliavergara@gmail.com

‎css/style.css

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
body{
2+
background: rgba(127,145,165,1);
3+
background: -moz-linear-gradient(top, rgba(127,145,165,1) 0%, rgba(113,132,149,1) 29%, rgba(127,145,165,1) 50%, rgba(108,127,144,1) 100%);
4+
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(127,145,165,1)), color-stop(29%, rgba(113,132,149,1)), color-stop(50%, rgba(127,145,165,1)), color-stop(100%, rgba(108,127,144,1)));
5+
background: -webkit-linear-gradient(top, rgba(127,145,165,1) 0%, rgba(113,132,149,1) 29%, rgba(127,145,165,1) 50%, rgba(108,127,144,1) 100%);
6+
background: -o-linear-gradient(top, rgba(127,145,165,1) 0%, rgba(113,132,149,1) 29%, rgba(127,145,165,1) 50%, rgba(108,127,144,1) 100%);
7+
background: -ms-linear-gradient(top, rgba(127,145,165,1) 0%, rgba(113,132,149,1) 29%, rgba(127,145,165,1) 50%, rgba(108,127,144,1) 100%);
8+
background: linear-gradient(to bottom, rgba(127,145,165,1) 0%, rgba(113,132,149,1) 29%, rgba(127,145,165,1) 50%, rgba(108,127,144,1) 100%);
9+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f91a5', endColorstr='#6c7f90', GradientType=0 );
10+
margin:0;
11+
}
12+
13+
html,body{
14+
width: 100%;
15+
height: 100%;
16+
}
17+
18+
.error input, input.error{
19+
border: 1px solid red !important;
20+
border-radius: 1px;
21+
-webkit-border-radius: 1px;
22+
-moz-border-radius: 1px;
23+
-o-border-radius: 1px;
24+
-ms-border-radius: 1px;
25+
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
26+
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
27+
-moz-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
28+
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
29+
-ms-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
30+
}
31+
32+
#contenedor{
33+
height: auto;
34+
margin: auto;
35+
width: 100%;
36+
}
37+
#contenedor section.formulario{
38+
height: auto;
39+
margin: 70px auto 0 auto;
40+
width: 60%;
41+
}
42+
#contenedor section.formulario header {
43+
background-color: #18C0A9;
44+
color: #fff;
45+
height: auto;
46+
margin: auto;
47+
padding: 30px;
48+
}
49+
#contenedor section.formulario header h1{
50+
font-size: 40px;
51+
text-align: center;
52+
}
53+
#contenedor section.formulario section{
54+
background: #fff;
55+
padding: 15px;
56+
height: auto;
57+
}
58+
#contenedor section.formulario section h2{
59+
border-bottom: #2ECD71 2px solid;
60+
font-size: 30px;
61+
margin: 0 auto;
62+
padding-bottom: 10px;
63+
text-align: center;
64+
width: 45%;
65+
}
66+
#contenedor section.formulario section p{
67+
text-align: center;
68+
}
69+
#contenedor section.formulario section p img.imagen{
70+
display: block;
71+
margin: 0 auto;
72+
}
73+
#contenedor section.formulario section p input.separar_boton{
74+
background: #2ECD71;
75+
border-radius: 5px;
76+
-webkit-border-radius: 5px;
77+
-moz-border-radius: 5px;
78+
-o-border-radius: 5px;
79+
-ms-border-radius: 5px;
80+
border: 0;
81+
color: #fff;
82+
font-size: 18px;
83+
margin-top: 20px;
84+
padding: 10px;
85+
}

‎images/facebook.gif

36 KB
Loading

‎images/file.png

1.82 KB
Loading

‎includes/conexion.php

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?php
2+
3+
define("SERVIDOR","nombre del servidor");
4+
define("USUARIO","usuario");
5+
define("CLAVE","tu clave");
6+
define("BASE_DATOS","tu base de datos");
7+
8+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
9+
10+
function Conexion()
11+
{
12+
if (!($cn=mysqli_connect(SERVIDOR,USUARIO,CLAVE,BASE_DATOS)))
13+
{
14+
echo "Error conectando a la base de datos.";
15+
exit();
16+
}
17+
if (!mysqli_select_db($cn,BASE_DATOS))
18+
{
19+
echo "Error seleccionando la base de datos.";
20+
exit();
21+
}
22+
23+
return $cn;
24+
25+
}

‎index.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="css/style.css" />
6+
<title>Subir archivo CSV en PHP</title>
7+
<!-- libreria jquery -->
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
9+
<!-- cargar js -->
10+
<script src="js/cargar.js"></script>
11+
</head>
12+
<body>
13+
14+
<!-- contenedor -->
15+
<main id="contenedor">
16+
<!-- formulario -->
17+
<section class="formulario">
18+
19+
<!-- -->
20+
<header>
21+
<h1>Formulario para subir archivo CSV</h1>
22+
</header>
23+
<!-- -->
24+
25+
<!-- -->
26+
<section>
27+
<form name="frmSubirCSV" id="frmSubirCSV" method="post" enctype="multipart/form-data">
28+
<p><img src="images/file.png" alt="" class="imagen"></p>
29+
<h2>Subir archivo CSV</h2>
30+
<p><input type="file" name="archivo_csv" id="archivo_csv"></p>
31+
<p><input type="submit" class="enviar_archivo separar_boton" value="Enviar archivo"></p>
32+
33+
<div id="estado"></div>
34+
35+
</form>
36+
37+
</section>
38+
<!-- -->
39+
40+
</section>
41+
<!-- ./formulario -->
42+
43+
</main>
44+
<!-- ./contenedor -->
45+
46+
</body>
47+
</html>

‎js/cargar.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
$(document).ready(function(){
2+
3+
$('.enviar_archivo').on( "click", function(evt) {
4+
5+
evt.preventDefault();
6+
cargarArchivoCSV();
7+
8+
});
9+
10+
});
11+
12+
function cargarArchivoCSV()
13+
{
14+
15+
var archivo = $('input[name=archivo_csv]').val();
16+
var extension = $('#archivo_csv').val().split(".").pop().toLowerCase();
17+
var Formulario = document.getElementById('frmSubirCSV');
18+
var dataForm = new FormData(Formulario);
19+
20+
var retornarError = false;
21+
22+
if(archivo=="")
23+
{
24+
$('#archivo_csv').addClass('error');
25+
retornarError = true;
26+
$('#archivo_csv').focus();
27+
}
28+
else if($.inArray(extension, ['csv']) == -1)
29+
{
30+
alert("¡El archivo que esta tratando de subir es invalido!");
31+
retornarError = true;
32+
$('#archivo_csv').val("");
33+
}
34+
else
35+
{
36+
$('#archivo_csv').removeClass('error');
37+
}
38+
39+
// A continuacion se resalta todos los campos que contengan errores.
40+
if(retornarError == true)
41+
{
42+
return false;
43+
}
44+
45+
$.ajax({
46+
47+
url: 'procesar.php',
48+
type: 'POST',
49+
data: dataForm,
50+
cache: false,
51+
contentType: false,
52+
processData: false,
53+
beforeSend: function(){
54+
$('#estado').prepend('<p><img src="images/facebook.gif" /></p>');
55+
},
56+
success: function(data){
57+
$('#estado').fadeOut("fast",function()
58+
{
59+
$('#estado').html(data);
60+
});
61+
62+
$('#estado').fadeIn("slow");
63+
$("#frmSubirCSV").find('input[type=file]').val("");
64+
65+
},
66+
error: function (jqXHR, textStatus, errorThrown) {
67+
$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
68+
}
69+
70+
});
71+
72+
73+
}

‎procesar.php

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<?php
2+
3+
include("includes/conexion.php");
4+
5+
$cn = Conexion();
6+
7+
if(substr($_FILES['archivo_csv']['name'], -3)=="csv")
8+
{
9+
$fecha = date('Y-m-d');
10+
$carpeta = "tmp_excel/";
11+
$n_archivo = $fecha.'-'.$_FILES['archivo_csv']['name'];
12+
13+
$row = 1;
14+
15+
move_uploaded_file($_FILES['archivo_csv']['tmp_name'], $carpeta.$n_archivo);
16+
17+
$fp = fopen($carpeta.$n_archivo, "r");
18+
19+
while($data = fgetcsv($fp, 1000, ","))
20+
{
21+
22+
// Si la variable $row es diferente a 1, que no registre los titulos en la tabla
23+
if($row!=1)
24+
{
25+
$sql_archivo = "INSERT INTO datos(nombres,apellidos,direccion,celular,email)";
26+
$sql_archivo .= "VALUES('$data[0]','$data[1]','$data[2]','$data[3]','$data[4]')";
27+
28+
$rpta_archivo = mysqli_query($cn,$sql_archivo) or die(mysqli_error($cn));
29+
30+
if(!$sql_archivo)
31+
{
32+
echo "<p>Hubo un problema al momento de importar el archivo. Por favor vuelva a intentarlo</p>";
33+
exit;
34+
}
35+
36+
}
37+
38+
$row++;
39+
40+
}
41+
42+
fclose($fp);
43+
44+
echo "<p>La importacion del archivo CSV se ha subido satisfactoriamente</p>";
45+
46+
exit();
47+
48+
}

‎sql/datos.sql

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
-- phpMyAdmin SQL Dump
2+
-- version 4.5.1
3+
-- http://www.phpmyadmin.net
4+
--
5+
-- Servidor: 127.0.0.1
6+
-- Tiempo de generación: 20-04-2018 a las 00:25:26
7+
-- Versión del servidor: 10.1.10-MariaDB
8+
-- Versión de PHP: 5.6.19
9+
10+
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
11+
SET time_zone = "+00:00";
12+
13+
14+
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
15+
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
16+
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
17+
/*!40101 SET NAMES utf8mb4 */;
18+
19+
--
20+
-- Base de datos: `agenda`
21+
--
22+
23+
-- --------------------------------------------------------
24+
25+
--
26+
-- Estructura de tabla para la tabla `datos`
27+
--
28+
29+
CREATE TABLE `datos` (
30+
`id` int(11) NOT NULL,
31+
`nombres` varchar(100) DEFAULT NULL,
32+
`apellidos` varchar(100) DEFAULT NULL,
33+
`direccion` varchar(200) DEFAULT NULL,
34+
`celular` varchar(100) DEFAULT NULL,
35+
`email` varchar(200) DEFAULT NULL
36+
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
37+
38+
--
39+
-- Índices para tablas volcadas
40+
--
41+
42+
--
43+
-- Indices de la tabla `datos`
44+
--
45+
ALTER TABLE `datos`
46+
ADD PRIMARY KEY (`id`);
47+
48+
--
49+
-- AUTO_INCREMENT de las tablas volcadas
50+
--
51+
52+
--
53+
-- AUTO_INCREMENT de la tabla `datos`
54+
--
55+
ALTER TABLE `datos`
56+
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
57+
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
58+
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
59+
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

0 commit comments

Comments
 (0)