La interfaz de archivo HTML5 usa archivos para descargar en la página web

La interfaz de archivo proporciona información relacionada con los archivos y ejecuta JavaScript en la página web para acceder al contenido del archivo.

El objeto de archivo proviene del objeto Filelist devuelto por el usuario para seleccionar el archivo con la etiqueta de entrada, desde el objeto DataTransfer de la operación de arrastrar y soltar. El objeto de archivo es un blob especial que se puede usar en cualquier contexto que se pueda usar en Blob.

Para usar archivos en la página web, los objetos que generalmente deben estar involucrados son: objeto de archivo, objeto filelista, objeto FileReader.

Filelist proviene de dos lugares, la propiedad de archivos del elemento de entrada y la API de arrastrar y soltar (cuando se arrastra el archivo, el evento.datatransfer.files es un objeto filelista)

 <input id = fileitem type = file> var filelist = document.getElementById ('fileitem').

Longitud: este atributo solo devuelve la longitud del objeto de archivo contenido en el objeto Filelist.

Elemento (índice): obtenga el objeto de archivo especificado en la posición designada en el objeto Filelist. Se puede informar en forma de varios índices de matriz

Cada uno de los objeto Filelist es el objeto Archivo. El objeto de archivo es un blob especial.

1.lastModify: el momento en que se revisa el archivo, esta vez son los milisegundos que se aprobaron a las 0: 0: 00 el 1 de enero de 1970. Es un atributo legible

2.name: el nombre del archivo del archivo a la que se hace referencia el objeto de archivo, que es un atributo legible

3.type: el tipo de archivo del archivo a la que se hace referencia el objeto de archivo es el tipo de mía, que es un atributo legible.

4.Size: el tamaño del archivo del archivo a la que se hace referencia el objeto de archivo, este atributo de lectura única.

No hay forma de definir el objeto de archivo solo, pero tiene una forma de heredar del objeto BLOB.

El objeto FileReader permite que las aplicaciones web lean archivos en la computadora del usuario de manera asincrónica.

FileReader () es un constructor que puede crear un nuevo objeto FileReader a través de él.

var filereader = new FileReader ();

1.Error: Devuelve el error que ocurre durante el proceso de lectura.

2. Resultado: Devuelve el contenido del archivo, y el tipo es digno de tipo o ArrayBuffer. Este atributo es legal solo después de leer la operación.

3. Ready State: Devuelve el estado actual de la operación.

1.Abort (): Operación de lectura de interrupción. El valor de ReadyState se convierte en 2. 2.

2. ReadAsArrayBuffer (Blob): lea el blob especificado, como un objeto de archivo (el objeto de archivo es un blob especial). Mientras se complete la lectura, el valor de la propiedad ReadyState se convertirá en 2, y el atributo de resultados es un ArrayBuffer que representa los datos del archivo.

3. ReadAsDataurl (Blob): lea el blob especificado, como un objeto de archivo (un blob especial). Mientras se complete la lectura, el valor del atributo ReadyState se convertirá en 2. El atributo de resultado es una URL que representa los datos del archivo, y el formato de datos es la cadena de cadena codificada Base64

 <input type = file onChange = PreviewFile ()> <br> <img src = tight = 200 var previo View = document.queeryselector ('img'); Archivos [0];

4. ReadEteTxt (boob, codificación): lea el blob especificado, como un objeto de archivo (el objeto de archivo es un blob especial). Mientras lo lea, el valor de la propiedad ReadyState se convertirá en 2, y el atributo de resultados es una cadena de texto que representa los datos del archivo. El segundo parámetro es opcional.

1.Bort: terminación al leer la operación.

2. Error: activado al leer operaciones durante la operación.

3. Carga: activado al leer la operación con éxito.

4.Loadend: activado al final de la operación de lectura. No puedo leer el éxito o el fracaso.

5.LoadStart: activado al comienzo de la operación de lectura.

6.Process: activado durante el proceso de lectura.

Usando el objeto de archivo en HTML5, puede acceder a los archivos locales seleccionados y leer el contenido en estos archivos. El objeto de archivo es desde el elemento de entrada o la interfaz de arrastrar y soltar.

 <Entrada tipo = archivo id = input>

Acceso a archivos seleccionados a través de la entrada

 var selectFile = document.getElementById ('Entrada').

Solo puede elegir un archivo a la vez a la vez. Seleccione varios archivos a la vez antes de Gecko 1.9.2.

Para la interfaz de arrastrar y soltar, puede ver HTML5 Dragvent.

Paso 1: Cree un área de colocación. Un elemento ordinario, como div, p, etc.

Paso 2: Agregue el programa de procesamiento de eventos Drop, Dragenter, Dragover al área colocada. El rol clave es el programa de procesamiento de eventos de caída.

A continuación se muestra un ejemplo de un diagrama de giro corto:

 <div id = 'dropbox' class = 'dropbox'> </div> .dropbox {border: sólido 3px rojo;

 Var dropbox; (e) {e.stoppropagation (); ); i]; );

La anterior es la interfaz de archivo HTML5 introducida por Xiaobian para descargar archivos en la página web. ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!