Subir imágenes php jquery ajax

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 Les sirva en algún proyecto Saludos..

DEMOSTRACIÓN

Subir imágenes Php jQuery Ajax…

Relacionado

Relacionado

Construyendo un Template para juegos (descarga gratis)

10 Librerías Javascript Css de interés para diciembre 2018

Creando un simple sliding portfolio jquery