Saludos esta vez vamos a crear un formulario para subir imágenes con php jquery y Ajax . La función consiste en permitir a los visitantes cargar archivos desde sus navegadores tan solo con arrastrarlos o seleccionarlos de forma individual con un input..
Vamos a combinar una librería que se encuentra alojada en Github llamada jQuery file Upload y la librería jQuery Knob que nos va a mostrar la barra de progreso de carga..
Hay que tener en cuenta que por el momento existe un archivo php que va a permitir la subida de imágenes mediante un array puede modificar el archivo a su conveniencia permitiendo subir todo tipo de archivos .
Comencemos Archivos a utilizar:
• index.html
• upload.php
• carpeta donde se va a subir los archivos
• estilo.css
• jquery.fileupload.js
• jquery.iframe-transport.js
• jquery.knob.js
• jquery.ui.widget.js
• script.js
• index.html.- Es la página principal donde se realizará la subida de archivos mostrando una interfaz limpia ..
<!--
* Subir archivos con php jqyery Ajax
* http://www.bloguero-ec.com
* index.html
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Subir archivos con Php jquery Ajax</title>
<!-- fuente de google -->
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />
<!-- estilo en cabecera -->
<link href="css/estilo.css" rel="stylesheet" />
</head>
<body>
<!--formulario de ingreso utilizamos enctype="multipart/form-data"
que sirve para subir simultaneamente archivos -->
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<div id="drop">
<a></a>
<input type="file" name="upl" multiple />
</div>
<ul>
<!-- aqui se mostraran los archivos subidos -->
</ul>
</form>
<!-- librerías JavaScript a utilizar -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<!-- javascript utilizado para la carga -->
<script src="assets/js/script.js"></script>
</body>
</html>
• upload.php.- Se encargará de subir los archivos en una carpeta con el nombre uploads esta carpeta deberá existir físicamente dentro del proyecto para poder subir los archivos..
<?php
// Archivos permitidos por array
$allowed = array('png', 'jpg', 'gif','jpeg');
if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){
$extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);
if(!in_array(strtolower($extension), $allowed)){
echo '{"status":"error"}';
exit;
}
if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
echo '{"status":"success"}';
exit;
}
}
echo '{"status":"error"}';
exit;
• estilo.css.- Es un estilo basado en unas imágenes que encontré por ahí y las modifiqué…
/*-------------------------
* http://www.bloguero-ec.com
* estilo Para Subir archivos jQuery Php Ajax
* Reseteamos los margenes
--------------------------*/
*{
margin:0;
padding:0;
}
/*-------------------------
estilo general
--------------------------*/
html{
background-color:#ebebec;
background-image:-webkit-radial-gradient(center, #ebebec, #b4b4b4);
background-image:-moz-radial-gradient(center, #ebebec, #b4b4b4);
background-image:radial-gradient(center, #ebebec, #b4b4b4);
min-height:500px;
}
body{
font:15px/1.3 Arial, sans-serif;
color: #4f4f4f;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside{
display: block;
}
/*----------------------------
Formulario
-----------------------------*/
#upload{
font-family:'PT Sans Narrow', sans-serif;
background-color:#2C3E50;
background-image:-webkit-linear-gradient(top, #2C3E50, #2C3E50);
background-image:-moz-linear-gradient(top, #2C3E50, #2C3E50);
background-image:linear-gradient(top, #2C3E50, #2C3E50);
width:400px;
padding:30px;
border-radius:3px;
margin:100px auto 100px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
#drop{
background-color:#2C3E50;
background-image: url('../img/arrastrar-imagen.png') ;
width:391px;
height:290px;
text-align: center;
text-transform: uppercase;
font-size:16px;
font-weight:bold;
color:#7f858a;
}
#drop a{
background-image:url('../img/subir.png');
width:45px;
height:38px;
border-radius:2px;
cursor:pointer;
display:inline-block;
margin-top:135px;
line-height:1;
}
#drop input{
display:none;
}
#upload ul{
list-style:none;
margin:0 -30px;
border-top:1px solid #3B5166;
border-bottom: 1px solid #3B5166;
}
#upload ul li{
background-color:#2C3E50;
background-image:-webkit-linear-gradient(top, #2C3E50, #2C3E50);
background-image:-moz-linear-gradient(top, #2C3E50, #2C3E50);
background-image:linear-gradient(top, #2C3E50, #2C3E50);
border-top:1px solid #3B5166;
border-bottom:1px solid #3B5166;
padding:15px;
height: 52px;
position: relative;
}
#upload ul li input{
display: none;
}
#upload ul li p{
width: 144px;
overflow: hidden;
white-space: nowrap;
color: #EEE;
font-size: 16px;
font-weight: bold;
position: absolute;
top: 20px;
left: 100px;
}
#upload ul li i{
font-weight: normal;
font-style:normal;
color:#7f7f7f;
display:block;
}
#upload ul li canvas{
top: 15px;
left: 32px;
position: absolute;
}
#upload ul li span{
width: 15px;
height: 12px;
background: url('../img/icons.png') no-repeat;
position: absolute;
top: 34px;
right: 33px;
cursor:pointer;
}
#upload ul li.working span{
height: 16px;
background-position: 0 -12px;
}
#upload ul li.error p{
color:red;
}
• Las librerías jquery.iframe-transport.js , jquery.fileupload.js , jquery.ui.widget.js .- Podrás descargar desde la página de autor. Para su utilización descárgalas y alójalas dentro del proyecto y coloca las rutas del script antes que cierre el body..
• La librería jquery.Knob.js .- la podrás descargar desde acá , luego utilízala dentro del proyecto como mas te convenga.
• La librería jQuery.min.js .- Podrás descargarla desde su página de autor o Utilizar sus CDN hosted alojados a nivel mundial.
• scripts.js.- incluye funciones para la carga de archivos..
//hecho por Angel
$(function(){
var ul = $('#upload ul');
$('#drop a').click(function(){
// simula un clic en el boton input donde se enucuentra la imagen de buscar
$(this).parent().find('input').click();
});
// Inicializa el jQuery File Upload plugin
$('#upload').fileupload({
// este elemnto aceptará los archvos de subida con drag/drop
dropZone: $('#drop'),
// Esta función se llama cuando se añade un archivo a la cola
// ya sea por arrastrar y soltar o por el boton de busqueda
add: function (e, data) {
var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
'data-fgColor="#36BFA6" data-readOnly="1" data-bgColor="#88A9A3" /><p></p><span></span></li>');
// Añade el nombre y tamaño del archivo
tpl.find('p').text(data.files[0].name)
.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
// Añadir el código HTML para el elemento UL
data.context = tpl.appendTo(ul);
// inicializa el plugin Knob
tpl.find('input').knob();
// removemos del html con el boton cancelar
tpl.find('span').click(function(){
if(tpl.hasClass('working')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
// Cargar automáticamente el archivo una vez que se añade a la cola
var jqXHR = data.submit();
},
progress: function(e, data){
// Calcular el porcentaje de finalización de la carga
var progress = parseInt(data.loaded / data.total * 100, 10);
// Actualice el campo de entrada oculto y desencadena el cambio
data.context.find('input').val(progress).change();
if(progress == 100){
data.context.removeClass('working');
}
},
fail:function(e, data){
// Error si sale algo mal
data.context.addClass('error');
}
});
// Evitar la acción predeterminada cuando un archivo se coloca en la ventana
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Función auxiliar que da formato a los tamaños de archivo
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});
Espero este proyecto de cómo subir imágenes php jquery ajax les sirva de ayuda Hasta la próxima..
