Código de instancia de descarga de carga de archivo html5

La API del archivo proporcionada en HTML5 tiene una gran cantidad de aplicaciones en el front -end. Y la compatibilidad de cada navegador también es mejor, incluida la terminal móvil, excepto IE solo admite la versión de IE10 o superior. Si desea dominar mejor la función del archivo de operación, primero debe familiarizar todas las API.

La etiqueta Input [Type = File] en HTML tiene un atributo múltiple, lo que permite a los usuarios elegir múltiples archivos, y el objeto Filelist significa una lista de archivos seleccionados por el usuario. Cada archivo en esta lista es un objeto de archivo.

1. El atributo del objeto de archivo:
2. Nombre: Nombre del archivo, no incluye rutas.
3. Tipo: Tipo de archivo. Los archivos de tipo de archivo comenzarán con la imagen/, que puede limitarse a la carga de la imagen.
4. Tamaño: tamaño de archivo. Otras operaciones se pueden realizar de acuerdo con el tamaño del archivo.
5. LastModify: el tiempo de modificación final del archivo.

 <input type = archivo id = archivos múltiples> <script> var elem = document.getElementById ('archivos'); IS Imágenes y el tamaño del archivo es inferior a 200 kb if (archivos [i] .type.indexof ('image/')! == -1 && files [i] .size <204800) {console.log (archivos [i] .Name);}}} </script>

Hay un atributo de acceso en la entrada que se puede usar para especificar el tipo de archivo que se puede enviar por carga de archivo.

Aceptar = Image/* se puede usar para limitar solo para cargar formatos de imagen. Sin embargo, hay un problema con la respuesta lenta bajo el navegador WebKit.

La solución es cambiar el* pase al tipo MIME especificado.

 <Entrada type = file acepta = image/gif, image/jpeg, image/jpg, image/png>

El objeto BLOB es equivalente a un contenedor que puede usarse para almacenar datos binarios. Tiene dos atributos, el atributo de tamaño representa la longitud del byte y el atributo de tipo representa el tipo MIME.

Cómo crear

El objeto BLOB se puede crear utilizando la función de construcción blob ().

 var blob = new Blob (['Hello'], {Type: Text/Plain});

El primer parámetro en el constructor de blob es una matriz que puede almacenar objetos ArrayBuffer, objetos ArrayBufferview, objetos BLOB y cadena.

El objeto Blob puede devolver un nuevo objeto Blob a través del método SLICE ().

 var newblob = blob.slice (0,5, {type: text/sencillo});

El método SLICE () utiliza tres parámetros, todos opcionales. El primer parámetro representa la posición de inicio de los datos binarios en el objeto BLOB, el segundo parámetro representa el final de la replicación, y el tercer parámetro es el tipo MIME del objeto BLOB.

Canvas.toBlob () también puede crear objetos blob. TobLob () usa tres parámetros, el primero es la función de devolución de llamada, la segunda es el tipo de imagen, el valor predeterminado es imagen/png, el tercero es la calidad de la imagen, el valor es entre 0 y 1.

 var lienvas = document.getElementById ('Canvas');

Los objetos BLOD pueden generar una dirección de red a través del objeto Window.url, combinado con el atributo de descarga de la etiqueta A para lograr la función de archivo de descarga.

Por ejemplo, descargue el lienzo como un archivo de imagen.

 var lienvas = document.getElementById ('Canvas'); var url = url.createObject "blob); var a = document.createElement ('a'); a.download = 'Canvas'; a.href = url; // simula una etiqueta para descargar A.Click (); / / / / / / / / Dígale al navegador después de descargar.

La cadena también se puede guardar como un archivo de texto con un método similar.

El objeto FileReader se usa principalmente para leer el archivo en la memoria y leer los datos en el archivo. Crear un objeto FileReader construyendo una función

 var lector = new FileReader ();

El objeto tiene los siguientes métodos:

1. Abortar: operación de lectura de interrupción.
2. ReadAsArrayBuffer: lea el contenido del archivo al objeto ArrayBuffer.
3. ReadAsBinaryString: Leer archivos como datos binarios.
4. ReadAsDataurl: lea el archivo como datos: formato URL.
5. Readastext: lea archivos como texto.

La aplicación común es mostrar la imagen a través de ReadAsDataurl () después de cargar imágenes en el cliente.

 <Entrada tipo = archivo id = archivos aceptado = image/jpeg, image/jpg, image/png> <img src = blank.gif id = vista previa> <script> var elem = d ('files'), img = documento. GetElementById ('Preview'); .src = ev.target.result;} lector.readasdataurl (archivos [0]);}} </script>

Sin embargo, cuando tome fotos en algunos teléfonos móviles, habrá errores al cargar fotos, y se encontrarán las fotos, incluidos Samsung y iPhone. Esencia Esencia La solución no explica aquí.

ReadEteText () del objeto FileReader puede leer el texto del archivo, combinado con la función del objeto blob para descargar el archivo, luego el archivo de exportación de datos es copia de seguridad del área local. A través de la entrada y usar ReadEteTXT () para usar el texto ReadEteText () Read y restaurar datos.

El código es similar a la función anterior.

Los métodos ATOB y BTOA se agregan a HTML5 para admitir la codificación Base64. Su nombre también es muy simple.

 var a = https: //lin-xin.github.io; iconsole.log (b);

El método BTOA codifica la cadena A, que no cambiará el valor de A, y devolverá un valor después de una codificación.

El método ATOB decodifica la cadena codificada.

Sin embargo, los chinos en los parámetros han excedido el rango de caracteres de la codificación ASCII de 8 bits, y el navegador informará un error. Por lo tanto, primero debe codificar el EncodeUricomponent.

 Var A = Hello World;

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