Carga del archivo de aplicación HTML5

Durante mucho tiempo, los desarrolladores han estado angustiados por esto. Algunos sitios web usan el atributo Enableype = multipart/de datos de la etiqueta de formulario, pero este atributo requiere que el servidor cometa configuraciones especiales para mostrar el progreso, y también es complicado. nosotros.

Ahora veamos por qué HTML5 puede resolver este problema y qué tan bien puede hacerlo.

En el estándar HTML5, el objeto XMLHTTPRequest se redefine, conocido como XMLHTTPRequest Nivel 2, que contiene las siguientes 5 nuevas características:

1. Admite cargar y descargar bytes, como archivos, blobs y datos de formulario

2. Agregado el progreso de la carga y descarga

3. Soporte de solicitudes de dominio cruzado

4. Permitir una solicitud anónima (es decir, la parte de referencia que no envía http)

5. Permitir el tiempo de espera de la solicitud

En este tutorial, principalmente prestamos atención a la primera y segunda características, especialmente el segundo elemento, puede proporcionar el progreso de carga que queremos. A diferencia del plan anterior, esta solución no requiere que el servidor haga configuraciones especiales, para que todos puedan probarlo mirando el tutorial.

El diagrama anterior es el contenido que podemos lograr:

1. Muestre la información de archivo cargada, como el nombre del archivo, el tipo, el tamaño

2. Una barra de progreso que puede mostrar un progreso real

3. La velocidad de la carga

4. Estimación del resto del tiempo

5. La cantidad de datos que se han cargado

6. La respuesta del servidor devuelta después de que termine la carga

Además, con XMLHTTPRequest, nuestro proceso de carga es asíncrono, por lo que cuando el usuario carga el archivo, todavía puede operar otros elementos en la página web, y no hay necesidad de esperar a que la carga se complete. Una vez que termina la carga, podemos obtener la respuesta del servidor, por lo que todo el proceso de carga es bastante lógico.

HTML5 agrega un nuevo evento de progreso, que nos proporciona la siguiente información:

1. Tamaño total de archivos

2. Cargado -El tamaño de la cargada

3. Longitud Computable -al si se puede calcular el progreso

No hay mucha información, pero es suficiente para calcular el progreso del archivo. Por supuesto, todavía hay muchas cosas que no da directamente, lo cual es una pena.

No es muy diferente del código de carga de archivos ordinario. Sin embargo, tenga en cuenta que la etiqueta de entrada asocia una función JavaScript en OnChange.

 <! fila> <etiqueta for = fileToUpload> Seleccione un archivo para cargar </label> <input type = file name = filetoUpload id = filetoUpload = filesElec ted ();/> </div> <div ID = filename> </div> <div id = filesize> </div> <div id = fileteype> </div> <div class = row> <input type = button ondClick = uploadFile () value = upload/>> << div Div

Una vez que usamos la entrada en HTML, podemos obtener un objeto Filelista en el código JS. Este objeto es parte de la API de archivo recién agregada en HTML5.

1. Nombre - Nombre del archivo (no incluye ruta)

2. Tipo de archivo de tipo (minúsculas)

3. Tamaño de tamaño del tamaño (la unidad es byte)

Esto es exactamente lo que necesitamos. Por supuesto, HTML5 también tiene un objeto FileReader, pero no lo usamos aquí. Ahora, a través de los tres contenidos anteriores, podemos controlar los tipos de tamaño y archivos cargados por el usuario para reducir la presión durante el servidor y mejorar el factor de seguridad.

 Función Filection () {Var File = Document.getElementById ('filetoUpload'). .size * 100 / (1024 * 1024)) / 100) .tring () + 'mb'; Document.getElementById ('nombre de archivo'). 'Tipo:' + file.type;}}

Entonces, ¿qué sucederá cuando el usuario elija un buen archivo y haga clic en cargar?

 Función iba de carga () {var xhr = new XMLHTTPREQUEST (); ; send (fd);} Función SuboadProgress (EVT) {if (evt.lengthComputable) {var porcentaje de porcentaje = Math.round. ) + '%';} Else {document.gtelementById ('progressnumber') .innerhtml = 'no se puede calcular';}} uploadCompplete (evt) { / * Este evento se plantea cuando el servidor envía una respuesta * / alerta (evt.target.esponsetext);

En la segunda línea de código, nuestro código JS utiliza otro nuevo objeto -formdata lanzado por otro HTML5. El objeto FormData es el conjunto de datos de formulario del usuario. Enviamos datos al servidor girando este objeto.

Por supuesto, también podemos construir este objeto manualmente en el código, por ejemplo, como lo siguiente:

 var fd = nuevo FormData (); ]);

Volver al tema. Mirando hacia atrás en el código anterior, agregamos muchos monitoreo de eventos de XMLHTTPRequest. En particular, es importante tener en cuenta que lo que estamos vinculando no es xmlhttprequest en sí, sino sus atributos, como la carga de carga.

Finalmente, eche un vistazo al código completo.

 <! [0]; ) + 'Mb'; .name; FD.Append (FileToUpload, Document.getElementById ('filetoUpload'). falso); porcentaje de contrato = math.round (ev.loaded * 100 / evt.total); para calcular '; por el usuario o el navegador dejó caer la conexión.);} </script> </head> <boody> <form1 id = form1 enctype = multipart/form-data método = post accy = upload.php> <div class = row > <Label = Filetoup Load> Seleccione un archivo para cargar </etiqueta> <input type = file name = filetoUpload id = filetoUpload onChange = filesElect ();/> </div> <div ID = filename> </div> </div> Div id = fi lesize> </div> <div id = fileteype> </div> <div class = row> <input type = button onClick = uploadFile () valor = upload/> </iv m> </body> </html>

¿Está completada nuestra tarea? Se puede decir que está completo, porque este código ha podido completar la tarea de cargar archivos, y también puede mostrar el progreso de la carga; Tenemos muchas cosas que no se han hecho, como CSS, como CSS Beautify, etc. Pero este no es el tema de nuestro artículo.

Finalmente, recuerde que el código del tutorial debe operarse en el navegador que admite las nuevas funciones.

Lo anterior es todo el contenido de este artículo.