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..