Por cierto, hoy acabo de navegar el código fuente de proxy switchysharp y gané muchas cosas, incluida la lectura y el guardado de archivos para introducir en este artículo.
Debido a que Google no proporciona la función de sincronizar los datos del complemento, la importación y la exportación de configuraciones de complemento deben tratarse con archivos. Por razones de seguridad, solo IE proporciona una API para acceder a archivos; Pero con la llegada de HTML 5, otros navegadores también lo han apoyado.
Primero, hablemos de leer el archivo. W3C proporciona algunas API de archivos, la más importante de las cuales es la clase FileReader.
Primera lista de las etiquetas HTML que necesita:
Copie el código del código de la siguiente manera: <input type = "file" id = "file" onchange = "manejilfiles (this.files)"/>
Cuando se selecciona un archivo, la lista que contiene el archivo (un objeto Filelist) se pasará como un parámetro a la función handerFiles ().
Este objeto Filelist es similar a una matriz, que puede decir el número de archivos, y sus elementos son el objeto de archivo.
Desde este objeto de archivo, puede obtener atributos como nombre, tamaño, dastModifiedDate y tipo.
Pase este objeto de archivo al método de lectura del objeto FileReader y puede leer el archivo.
Hay 4 métodos de lectura en FileReader:
1. ReadAsArrayBuffer (archivo): lea el archivo como ArrayBuffer.
2. ReadAsBinaryString (archivo): lea el archivo como una cadena binaria
3.ReadasDataurl (archivo): lea el archivo como URL de datos
4. ReadEteText (archivo, [codificación]): lee el archivo como texto, el valor de codificación predeterminado es 'UTF-8'
Además, el método abort () puede dejar de leer el archivo.
El objeto FileReader debe procesarse después de leer el archivo. Para no bloquear el hilo actual, la API adopta un modelo de evento, que puede registrar estos eventos:
1.NAnabort: desencadenado cuando se interrumpe
2. Animero: activado cuando ocurre un error
3.onload: activado cuando el archivo se lee correctamente
4.onloadend: activado cuando se lee el archivo, independientemente de si falla o no
5.onloadStart: activado cuando el archivo comienza a leer
6.PROGE: se desencadena periódicamente cuando se lee el archivo
Con estos métodos, puede procesar los archivos.
Intentemos leer los archivos de texto primero:
La copia del código es la siguiente:
Funcion HandleFiles (archivos) {
if (files.length) {
VAR file = archivos [0];
var lector = new FileReader ();
if (/text//w+/.test(file.type)) {
lector.onload = function () {
$ ('<pre>' + this.result + '</pre>'). appendTo ('cuerpo');
}
lector.readastext (archivo);
}
}
}
This.result aquí es realmente lector.result, que es el contenido del archivo de lectura.
Después de las pruebas, encontrará que el contenido de este archivo se ha agregado a la página web. Si está utilizando Chrome, debe colocar la página web en el servidor o en el complemento, y el protocolo de archivo fallará.
Vamos a intentar nuevamente las imágenes, porque el navegador puede mostrar directamente las imágenes del protocolo de URI de datos, así que agregue las imágenes esta vez:
La copia del código es la siguiente:
Funcion HandleFiles (archivos) {
if (files.length) {
VAR file = archivos [0];
var lector = new FileReader ();
if (/text//w+/.test(file.type)) {
lector.onload = function () {
$ ('<pre>' + this.result + '</pre>'). appendTo ('cuerpo');
}
lector.readastext (archivo);
} else if (/image /// w+/. test (file.type)) {
lector.onload = function () {
$ ('<img src = "' + this.result + '" />').appendto('body');
}
lector.readasdataurl (archivo);
}
}
}
De hecho, la entrada: el control de archivos también admite seleccionar múltiples archivos:
La copia del código es la siguiente:
<input type = "file" id = "files" múltiple = "" onchange = "manual (this.files)"/>
De esta manera, Handlefiles () debe atravesarse para procesar archivos.
Si desea leer solo una parte de los datos, el objeto de archivo también tiene métodos webkitsLice () o mozslice (), que se utilizan para generar objetos blob. FileReader puede leer este objeto al igual que el objeto Archivo. Estos dos métodos reciben 3 parámetros: el primer parámetro es la posición inicial; El segundo es la posición final, y cuando se omite, se lee el final del archivo; El tercero es el tipo de contenido.
Para ver ejemplos, consulte "Leer archivos locales en JavaScript".
Por supuesto, además de importar datos y mostrar archivos, también se puede utilizar para la carga de Ajax. El código se puede utilizar para consultar "Uso de archivos de aplicaciones web".
A continuación, guarde el archivo.
De hecho, la API de archivo: el escritor proporciona 4 interfaces, pero actualmente solo algunos navegadores (Chrome 8+ y Firefox 4+) implementan BlobBuilder, y el resto de las interfaces no están disponibles.
Para los navegadores no compatibles, puede usar blobbuilder.js y filesaver.js para obtener soporte.
Lo estudié y descubrí el misterio.
BlobBuilder puede crear un objeto Blob. Pase este objeto BLOB al método URL.CreateObjectUrl () y puede obtener una URL de objeto. Y esta URL del objeto es la dirección de descarga de este objeto BLOB.
Después de obtener la dirección de descarga, cree un elemento A, asigne la dirección de descarga al atributo HREF y asigne el nombre del archivo al atributo de descarga (compatible con Chrome 14+).
Luego cree un evento de clic y entregue a este elemento para procesar, lo que hará que el navegador comience a descargar el objeto Blob.
Finalmente, use URL.RebOKEObjectUrl () para liberar la URL del objeto, notificando al navegador que no tiene que continuar haciendo referencia al archivo.
Aquí hay un código simplificado:
La copia del código es la siguiente:
var blobBuilder = blobBuilder || WebkitblobBuilder || Mozblobbuilder;
var url = url || webkiturl || ventana;
función saveas (blob, nombre de archivo) {
var type = blob.type;
var force_savisable_type = 'Application/Octet-stream';
if (type && type! = force_savisable_type) {// force descargar, no abrir en el navegador
var slice = blob.slice || blob.webkitslice || Blob.Mozslice;
blob = slice.call (blob, 0, blob.size, force_savable_type);
}
var url = url.createObjectUrl (blob);
var save_link = document.createElementns ('http://www.w3.org/1999/xhtml', 'a');
save_link.href = url;
save_link.download = filename;
var event = document.createEvent ('MouseEvents');
event.initMouseEvent ('Haga clic', Verdadero, Falso, Ventana, 0, 0, 0, 0, Falso, Falso, Falso, Falso, Falso, 0, NULL);
save_link.dispatcheVent (evento);
URL.ROVOKEOBJECTURL (URL);
}
var bb = new BlobBuilder;
bb.append ('¡Hola, mundo!');
Saveas (bb.getBlob ('text/sencillo; charset = utf-8'), 'hola world.txt');
Se solicitará a un archivo de texto que guarde durante la prueba. Chrome necesita colocar páginas web en el servidor o en el complemento.