A propósito, hoje eu acabei de navegar pelo código -fonte do proxy switchysharp e ganhei muitas coisas, incluindo arquivos de leitura e salvamento a serem introduzidos neste artigo.
Como o Google não fornece a função de sincronizar dados de plug-in, a importação e exportação de configurações de plug-in deve ser tratada com arquivos. Por motivos de segurança, apenas o IE fornece uma API para acessar arquivos; Mas com a chegada do HTML 5, outros navegadores também o apoiaram.
Primeiro, vamos falar sobre a leitura do arquivo. O W3C fornece algumas APIs de arquivo, as mais importantes das quais é a classe FileReader.
Liste primeiro as tags HTML que você precisa:
Copie o código do código da seguinte forma: <input type = "file" id = "arquivo" onchange = "handlefiles (this.files)"/>
Quando um arquivo é selecionado, a lista que contém o arquivo (um objeto FilElist) será passada como um parâmetro para a função HandleFiles ().
Esse objeto filelista é semelhante a uma matriz, que pode dizer o número de arquivos, e seus elementos são o objeto de arquivo.
A partir deste objeto de arquivo, você pode obter atributos como nome, tamanho, lastModifiedDate e tipo.
Passe este objeto de arquivo para o método de leitura do objeto FileReader e você pode ler o arquivo.
Existem 4 métodos de leitura no FileReader:
1. ReadasArrayBuffer (arquivo): Leia o arquivo como um ArrayBuffer.
2. ReadasbinaryString (arquivo): Leia o arquivo como uma string binária
3.readosdataurl (arquivo): Leia o arquivo como URL de dados
4. TRADASTEXT (arquivo, [codificação]): lê o arquivo como texto, o valor de codificação padrão é 'UTF-8'
Além disso, o método abort () pode parar de ler o arquivo.
O objeto FileReader precisa ser processado após a leitura do arquivo. Para não bloquear o tópico atual, a API adota um modelo de evento, que pode registrar esses eventos:
1.Onabort: acionado quando interrompido
2.ONERROR: acionado quando ocorre um erro
3.Noad: acionado quando o arquivo é lido com sucesso
4.Olloadend: acionado quando o arquivo é lido, independentemente de falhar ou não
5.ONLOADSTART: acionado quando o arquivo começa a ler
6.OPROGRESS: gatilhos periodicamente quando o arquivo é lido
Com esses métodos, você pode processar os arquivos.
Vamos tentar ler os arquivos de texto primeiro:
A cópia do código é a seguinte:
Função Handelfiles (arquivos) {
if (files.length) {
var arquivo = arquivos [0];
var leitor = new fileReader ();
if (/text///w+/.test(file.type)) {
leitor.onload = function () {
$ ('<pre>' + this.result + '</pre>'). Appendto ('corpo');
}
leitor.readastext (arquivo);
}
}
}
This.Result aqui é realmente leitor.result, que é o conteúdo do arquivo de leitura.
Após o teste, você descobrirá que o conteúdo deste arquivo foi adicionado à página da web. Se você estiver usando o Chrome, coloque a página da web no servidor ou no plug-in e o protocolo de arquivo falhará.
Vamos tentar as fotos novamente, porque o navegador pode exibir diretamente as imagens do protocolo URI de dados, então adicione as imagens desta vez:
A cópia do código é a seguinte:
Função Handelfiles (arquivos) {
if (files.length) {
var arquivo = arquivos [0];
var leitor = new fileReader ();
if (/text///w+/.test(file.type)) {
leitor.onload = function () {
$ ('<pre>' + this.result + '</pre>'). Appendto ('corpo');
}
leitor.readastext (arquivo);
} else if (/image /// w+/. test (file.type)) {
leitor.onload = function () {
$ ('<img src = "' + this.result + '" />').appendto('body');
}
leitor.readasDataurl (arquivo);
}
}
}
De fato, a entrada: o controle de arquivos também suporta a seleção de vários arquivos:
A cópia do código é a seguinte:
<input type = "file" id = "arquivos" múltiplo = "" onchange = "handlefiles (this.files)"/>
Dessa forma, o handlefiles () precisa ser percorrido para processar arquivos.
Se você deseja ler apenas parte dos dados, o objeto de arquivo também possui métodos webkitslice () ou mozslice (), que são usados para gerar objetos BLOB. Este objeto pode ser lido pelo FileReader, assim como o objeto de arquivo. Esses dois métodos recebem 3 parâmetros: o primeiro parâmetro é a posição inicial; A segunda é a posição final e, quando omitida, o final do arquivo é lido; O terceiro é o tipo de conteúdo.
Para exemplos, consulte "Lendo arquivos locais em JavaScript".
Obviamente, além de importar dados e exibir arquivos, eles também podem ser usados para upload do AJAX. O código pode ser usado para se referir a "usando arquivos de aplicativos da web".
Em seguida, salve o arquivo.
De fato, a API do arquivo: o Writer fornece 4 interfaces, mas atualmente apenas alguns navegadores (Chrome 8+ e Firefox 4+) implementam o Blobbuilder e o restante das interfaces não estão disponíveis.
Para navegadores não suportados, você pode usar o blobbuilder.js e o FileSaver.js para obter suporte.
Estudei e descobri o mistério.
Blobbuilder pode criar um objeto BLOB. Passe este objeto BLOB para o método URL.CreateObjecturl () e você pode obter um URL de objeto. E este URL do objeto é o endereço de download deste objeto BLOB.
Depois de obter o endereço de download, crie um elemento A, atribua o endereço de download ao atributo href e atribua o nome do arquivo ao atributo de download (suportado pelo Chrome 14+).
Em seguida, crie um evento de clique e entregue -o a este elemento a ser processado, o que fará com que o navegador comece a baixar o objeto BLOB.
Por fim, use o url.revokeObjecturl () para liberar o URL do objeto, notificando o navegador de que ele não precisa continuar a fazer referência ao arquivo.
Aqui está um código simplificado:
A cópia do código é a seguinte:
var Blobbuilder = Blobbuilder || Webkitblobbuilder || Mozblobbuilder;
var url = url || webkiturl || janela;
função saveas (blob, nome do arquivo) {
var tipo = blob.type;
var force_saveable_type = 'aplicativo/octeto-stream';
if (type && type! = force_saveable_type) {// download de força, não aberto no navegador
var slice = blob.slice || blob.webkitslice || blob.mozslice;
blob = slice.call (blob, 0, blob.size, force_saveable_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 = nome do arquivo;
var evento = document.createevent ('mouseevents');
Event.initMouSeEvent ('Clique', verdadeiro, falso, janela, 0, 0, 0, 0, 0, falso, falso, falso, falso, falso, 0, nulo);
save_link.dispatchEvent (evento);
Url.revokeObjecturl (URL);
}
var bb = new Blobbuilder;
bb.append ('Olá, mundo!');
SAVEAS (BB.GetBlob ('Text/Plain; charset = utf-8'), 'Hello World.txt');
Um arquivo de texto será solicitado a salvar durante o teste. O Chrome precisa colocar páginas da web no servidor ou no plug-in.