You are here
Subida de archivos con HTML5, Jquery y PHP Sin categoría 

Subida de archivos con HTML5, Jquery y PHP

Subida de archivos con HTML5, Jquery y PHP

Hoy vamos a desarrollar una pequeña aplicación web llamada Centro de carga , que permitirá a los usuarios subir fotos de sus ordenadores arrastrándolos y soltándolos en la ventana del navegador, es posible con las nuevas APIs de HTML5 expuestos por los navegadores modernos.

Las fotografías tendrán una vista previa y una barra de progreso, todos los cuales controla en el lado del cliente.

En la actualidad, las fotos sólo se almacenan en una carpeta en el servidor, pero se puede mejorar la forma que desee.

¿Qué archivo HTML 5 subidos?

Subir archivos usando HTML5 es en realidad una combinación de tres tecnologías – la nueva API Lector de archivos , también la nueva Drag & API gota , y el buen ol ‘AJAX (con la adición de la transferencia de datos binarios). He aquí una descripción de un proceso de carga de archivos HTML 5:

  1. El usuario coloca uno o más archivos de su sistema de archivos a la ventana del navegador arrastrando. Los navegadores que soportan la API de arrastrar y soltar se disparará un evento, que junto con otra información útil, contiene una lista de archivos que fueron arrojadas;
  2. Utilizando el API Lector de archivos , leemos los archivos de la lista como datos binarios, y almacenarlos en la memoria;
  3. Utilizamos el nuevo sendAsBinary método de la XMLHttpRequest objeto, y enviamos los datos del archivo en el servidor.

¿Suena complicado? Sí, se podría utilizar un poco de optimización. Afortunadamente, hay plugins jQuery que pueden hacer esto por nosotros. Uno de ellos es FileDrop , que es una envoltura alrededor de esta funcionalidad, y proporciona funciones para limitar el tamaño máximo de archivo y especificar las funciones de devolución de llamada, lo cual es muy práctico para integrarlo en sus aplicaciones web.

En la actualidad la carga de archivos funcionan sólo en Firefox y Chrome , pero próximas versiones principales de los otros navegadores también incluyen soporte para el mismo. Una solución alternativa simple para navegadores antiguos sería para mostrar un diálogo de introducción de archivo normal, pero no vamos a estar haciendo esto hoy en día, como nos centraremos nuestra atención en el uso de HTML5.

¡Entonces empecemos!

el HTML

El margen de beneficio de nuestro Centro de carga no podía ser más simple. Tenemos un documento HTML5 regular, que incluye nuestra hoja de estilo y script.js archivo, el plug-in FileDrop y la librería jQuery .

index.html

<! DOCTYPE html> 
< html > 
    < cabeza > 
        < meta  charset = "UTF-8" /> 
        < título > HTML5 arrastrar y soltar archivos Cargar con jQuery y PHP | Tutorialzine demo </ titulo >

        <! - Nuestra hoja de estilos CSS -> 
        < enlace  rel = "stylesheet"  href = "activos / css / styles.css" />

        <! - [If lt IE 9]>
          <Script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script>
        <[endif] -> 
    </ cabeza >

    < Cuerpo >

		< Header > 
			< h1 > HTML5 carga de archivos con jQuery y PHP </ h1 > 
		</ header >

		< Div  ID = "Dropbox" > 
			< lapso de  clase = "mensaje" > soltar imágenes aquí para subir. < Br /> < i > (que sólo será visible para usted) </ i > </ envergadura > 
		</ div >

        <! - Incluyendo la biblioteca jQuery -> 
		< script de  src = "http://code.jquery.com/jquery-1.6.3.min.js" ></ Escritura >

		<! - Incluyendo el plugin HTML5 Uploader -> 
		< script de  src = "activos / js / jquery.filedrop.js" ></ Escritura >

		<! - El archivo de secuencia de comandos principal -> 
        < script de  src = "activos / js / script.js" ></ Escritura >

    </ Cuerpo > 
</ html >

La única div que el FileDrop interactúa, es #dropbox . Pasaremos este elemento al plugin, que detectará cuando un archivo se coloca en la parte superior de la misma. El lapso de mensajes se actualiza si hay una condición de error (por ejemplo, si su navegador no es compatible con una de las API HTML5 que este ejemplo se basa en).

Subida de archivos con HTML5, Jquery y PHP
Subida de archivos con HTML5, Jquery y PHP

Más tarde, cuando se nos cae un archivo, nuestro código jQuery mostrará una vista previa añadiendo la siguiente línea de código a la página:

< Div  clase = "Previsualización de hecho" >

	< Lapso de  clase = "imageHolder" > 
		< img  src = "" /> 
		< lapso de  clase = "subido" > </ envergadura > 
	</ envergadura >

	< Div  clase = "progressHolder" > 
		< div  clase = "progreso" > </ div > 
	</ div >

</ Div >

Este fragmento contiene una vista previa de la imagen (el atributo de origen va a ser poblada con una DataURL de la imagen) y una barra de progreso. Toda la vista previa puede tener la “.done” clase, lo que hace que el “.uploaded” lapso en aparecer (está oculto por defecto). Este tramo tiene la marca de verificación verde como telón de fondo, e indica que la carga está completa.

Grande, vamos a pasar a nuestros script.js archivo!

El Código jQuery

Como toda la funcionalidad de transferencia de archivos real es manejado por el plugin FileDrop, sólo tenemos que llamar y pasar un par de devoluciones de llamada, por lo que podemos conectarlo a nuestroCentro de carga . Vamos a escribir un pequeño script PHP que se encarga de los archivos en el servidor en la siguiente sección.

El primer paso es escribir una función auxiliar que toma un objeto de archivo (un objeto especial que se crea mediante el navegador web de caída de archivo, y tiene propiedades como nombre de archivo, ruta y tamaño), y crea el margen de beneficio para la previsualización de la carga.

activos / js / script.js

var plantilla = '<div class = "vista previa">' +
						 '<span class = "imageHolder">' +
							 '<img />' +
							 '<span class = "cargado"> </ span>' +
						 '</ span> ' +
						 ' <div class = "progressHolder"> ' +
							 ' <div class = "progreso"> </ div> ' +
						 ' </ div> ' +
					 ' </ div> ' ;

	función  createImage ( archivo ) {

		var previsualización = $ (plantilla),
			image = $ ( 'img' , vista previa);

		var lector = nueva FileReader ();

		image.width = 100 ;
		image.height = 100 ;

		reader.onload = función ( e ) {

			// E.target.result sostiene el DataURL que 
			// se puede utilizar como una fuente de la imagen:

			image.attr ( «origen» , e.target.result);
		};

		// Leer el archivo como un DataURL. Cuando haya terminado, 
		// esto desencadenará la función onload arriba:
		reader.readAsDataURL (archivo);

		message.hide ();
		preview.appendTo (Dropbox);

		// Asociación de un contenedor de vista previa 
		// con el archivo, el uso de jQuery $ .data ():

		$ .data (Archivo, vista previa);
	}

La plantilla variable contiene el marcado HTML 5 de la vista previa. Obtenemos el DataURL de la imagen (un base64 representación de la imagen bytes) y añadirlo como la fuente de la imagen. Entonces todo se añade al recipiente de Dropbox. Ahora nos queda llamar el plugin FileDrop:

activos / js / script.js

$ ( Función () {

	var Dropbox = $ ( '#dropbox' ),
		message = $ ( '.Message' , Dropbox);

	dropbox.filedrop ({
		// El nombre de la entrada $ _FILES: 
		paramname: 'pic' ,

		maxfiles: 5 ,
    	MaxFileSize: 2 , // en mb 
		url: 'post_file.php' ,

		uploadFinished: función ( i, archivo, la respuesta ) {
			$ .data (archivo) .addClass ( 'hacer' );
			 // respuesta es el objeto JSON que vuelve post_file.php
		},

    	Error: la función ( err, archivo ) {
			 interruptor (err) {
				 caso  'BrowserNotSupported' :
					ShowMessage ( 'Tu navegador no soporta la carga de archivos HTML5!' );
					 romper ;
				 caso  'TooManyFiles' :
					alerta ( 'Demasiados archivos Por favor, seleccione como máximo 5!' );
					 romper ;
				 casos  'FileTooLarge' :
					alerta (file.name + 'es demasiado grande Por favor, subir archivos de hasta 2 MB!.' );
					 romper ;
				 por defecto :
					 romper ;
			}
		},

		// Se llama antes de cada carga se inicia 
		beforeeach: función ( archivo ) {
			 si (! File.type.match ( / ^ imagen \ // )) {
				alerta ( 'Sólo se permiten imágenes!' );

				Volviendo // false hará que el 
				archivo // para que sea rechazado 
				volver  falsa ;
			}
		},

		uploadStarted: función ( i, archivo, len ) {
			createImage (archivo);
		},

		progressUpdated: función ( i, archivo, el progreso ) {
			$ .data (archivo) .find ( '.progress' ) .width (curso);
		}

	});

	var plantilla = '...' ;

	función  createImage ( archivo ) {
		 // ... ver más arriba ...
	}

	función  ShowMessage ( msg ) {
		message.html (msg);
	}

});

Con esto, cada archivo de imagen válido que se deja caer en el #dropbox div se carga en post_file.php , que se puede ver en la siguiente sección.

Subida de archivos con HTML5, Jquery y PHP
Subida de archivos con HTML5, Jquery y PHP

El Código PHP

En el lado de PHP de las cosas, no hay diferencia entre una carga de archivos forma regular y un arrastrar y soltar uno. Esto significa que usted puede proporcionar fácilmente una solución alternativa a la aplicación y volver a utilizar el mismo servidor.

post_file.php

// Si desea ignorar los archivos cargados, 
// set $ demo_mode true;

$ demo_mode = false ;
 $ upload_dir = 'uploads /' ;
 $ allowed_ext = array ( 'jpg' , 'jpeg' , 'png' , 'gif' );

si (strtolower ( $ _SERVER [ 'REQUEST_METHOD' ])! = "post" ) {
	exit_status ( '! Error método HTTP incorrecto!' );
}

si (array_key_exists ( 'pic' , $ _FILES ) && $ _FILES [ 'pic' ] [ 'error' ] == 0 ) {

	$ pic = $ _FILES [ 'pic' ];

	si (! in_array (get_extension ( $ pic [ 'nombre' ]), $ allowed_ext )) {
		exit_status ( 'Sólo' .implode ( ',' , $ allowed_ext ). 'archivos están permitidos!' );
	}	

	si ( $ demo_mode ) {

		// La subida de archivos se ignoran. Sólo que registramos.

		$ line = implosión ( '' , array (fecha ( 'r' ), $ _SERVER [ 'REMOTE_ADDR' ], $ pic [ 'size' ], $ pic [ 'nombre' ]));
		file_put_contents ( 'log.txt' , $ línea de .PHP_EOL, FILE_APPEND);

		exit_status ( 'subidos se ignoran en el modo de demostración.' );
	}

	// Mover el archivo subido desde el temporal 
	directorio // a la carpeta de archivos:

	si (move_uploaded_file ( $ pic [ 'tmp_name' ], $ upload_dir . $ pic [ 'nombre' ])) {
		exit_status ( 'El archivo se subió con éxito!' );
	}

}

exit_status ( 'Algo salió mal con su carga!' );

// Las funciones auxiliares

función  exit_status ( $ str ) {
	 echo json_encode ( array ( 'status' => $ str ));
	 salida ;
}

función  get_extension ( $ nombre_archivo ) {
	 $ ext = explode ( '.' , $ nombre_archivo );
	 $ ext = array_pop ( $ ext );
	 volver strtolower ( $ ext );
}

El script se ejecuta algunas comprobaciones sobre el método HTTP que se utiliza para solicitar la página y la validez de la extensión de archivo. El modo de demostración es principalmente parademo.tutorialzine.com , en el que no quiero para almacenar cualquier carga de archivos (si usted no llamamove_uploaded_file en el script, el archivo se elimina automáticamente al final de la solicitud).

Ahora vamos a hacer que bonito!

Los estilos CSS

Salí a cabo las partes de la hoja de estilo que no están directamente relacionados con las cargas. Usted puede ver todo en styles.css .

activos / css / styles.css

/ * -------------------------
	Elemento de Dropbox
-------------------------- * /

#dropbox {
	 fondo : url ( '../img/background_tile_3.jpg' ) ;

	border-radius : 3px ;
	 position : relative ;
	 margin : 80px auto 90px ;
	 min-height : 290px  ;
	 overflow : hidden ;
	 padding-bottom : 40px  ;
     width : 990px  ;

	box-shadow : 0  0  4 píxeles  RGBA ( 0 , 0 , 0 , 0,3 ) inserción, 0 - 3px  2px  RGBA ( 0 , 0 , 0 , 0,1 ) ;
}

#dropbox  .Message {
	 font-size : 11px  ;
     text-align : centro ;
     padding-top : 160px ;
     display : bloque ;
}

#dropbox  .Message  i {
	 Color : #ccc ;
	 font-size : 10px ;
}

#dropbox : antes {
	 border-radius : 3px  3px  0  0 ;
}

/ * -------------------------
	Avances de imagen
-------------------------- * /

#dropbox  .preview {
	 width : 245px ;
	 height : 215px  ;
	 float : left ;
	 margin : 55px 0 0 60px     ;
	 position : relative ;
	 text-align : center ;
}

#dropbox  .preview  img {
	 max-ancho : 240px  ;
	 max-height : 180px ;
	 fronteriza : 3px sólida #fff ;
	 display : bloque ;

	box-shadow : 0  0  2px  # 000 ;
}

#dropbox  .imageHolder {
	 display : inline-block ;
	 posición : relativa ;
}

#dropbox  .uploaded {
	 position : absolute ;
	 top : 0 ;
	 left : 0 ;
	 height : 100% ;
	 width : 100% ;
	 background : url ( '../img/done.png' ) no-repeat centro de centro de RGBA ( 255 , 255 , 255 , 0.5 )  ;
	 display : ninguno ;
}

#dropbox  .preview .done  .uploaded {
	 display : bloque ;
}

/ * -------------------------
	Las barras de progreso
-------------------------- * /

#dropbox  .progressHolder {
	 position : absolute ;
	 background-color : #252f38 ;
	 height : 12px ;
	 width : 100% ;
	 left : 0 ;
	 bottom : 0  ;

	box-shadow : 0  0  2px  # 000 ;
}

#dropbox  .progress {
	 background-color : # 2586d0 ;
	 posición : absoluta ;
	 altura : 100% ;
	 izquierda : 0 ;
	 anchura : 0 ;

	box-shadow : 0 0 1 px RGBA ( 255 , 255 , 255 , 0.4 ) inserción     ;

	-moz-transición : 0,25s ;
	 -webkit-transición : 0,25s ;
	 -o-transición : 0,25s ;
	 transición : 0,25s ;
}

#dropbox  .preview .done  .progress {
	 anchura : 100%  importante! ;
}

El .progress div está posicionado absolutamente. Cambiando su anchura (en porcentaje) lo convierte en un indicador de progreso natural. El tiro en una transición de 0,25, y ha animado incrementos que sería un poco difícil de hacer con jQuery solo.

Con este nuestro Centro de carga HTML5 es completa!

Usted puede utilizar esto como un punto de partida para un servicio de carga de archivos, galería de HTML5, administrador de archivos o una nueva panel de administración de tu aplicación. Añadir sus opiniones o sugerencias en los comentarios.


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts