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

Creando un simple sliding portfolio jquery

CSS Grid VS Flexbox : una comparación práctica

Validación de formularios web (Una via fácil y rápido con HTML)