Como parte de uma série de artigos que eu estou discutindo alguns dos desafios que eu enfrentei ao tentar construir um HTML5 e um editor em linha livre dos ícones de Javascript. Eu queria que os usuários fossem capazes de abrir e editar arquivos de ícones existentes no meu editor de ícones. Como os arquivos de ícones podem conter vários quadros, eu precisava acessar esses quadros individuais para que eles pudessem ser exibidos e disponíveis para edição para o usuário. O número, tamanho e localização dos quadros contidos em um ícone são todos armazenados no cabeçalho do ícone. O cabeçalho do ícone é um bytes de coleção localizado no início de um arquivo de ícone, então eu precisava ler os dados binários contidos no arquivo. Agora podemos ler arquivos facilmente no navegador sem precisar enviar nenhum dado de volta para um servidor. Nesta edição eu mostro como você pode ler dados binários de um arquivo local no navegador usando a API de Arquivo HTML5. Para começar, estávamos indo para adicionar um elemento de entrada e definir o atributo de tipo para o arquivo, em seguida, em um bloco de script que vamos lidar com o arquivo de entradas evento onchange. lt corpo gt160160160160160160160160160160160160160160160160160160160160160160160160160160160160 160160160160 lt tipo id entrada quotbrowseOpenquot quotfilequot gt 160160160160 lt script type quottextjavascriptquot gt 160160160160160160160160 var FileInput document. getElementById (quotbrowseOpenquot) 160160160160160160160160 função fileInput. onchange () 160160160160160160160160160160160160 código para lidar com onchange evento vai aqui 160160160160 160160160160 160160160160 lt gt roteiro gt corpo lt Agora precisamos adicionar o código para lidar com o evento onchange. Aqui vamos criar um objeto FileReader. Usaremos o método readAsBinaryString do objeto FileReader que nos dará os dados binários brutos. Podemos passar um objeto File para o readAsBinaryString se quisermos ler o arquivo inteiro ou podemos passar um objeto Blob se apenas quisermos ler uma determinada seção de um arquivo. Neste exemplo, vamos passar um objeto File para ler o arquivo inteiro. Nós também precisamos lidar com o evento onloadend do FileReader como os dados que lemos com readAsBinaryString só está disponível para usar uma vez que o arquivo inteiro ou blob foi lido pelo FileReader. Nosso código no manipulador de eventos onchange agora se parece com isso. 160160160160160160160160 var fr nova FileReader () 160160160160160160160160 função fr. onloadend () 160160160160160160160160160160160160 código para lidar com onloadend evento 160160160160 160160160160 160160160160160160160160 fr. readAsBinaryString (este. files 0) No manipulador de eventos onloadend podemos acessar os dados que acaba de ser lido através do FileReaders Atributo de resultado. Podemos então loop através do atributo de resultado e chamar o método charCodeAt para retornar um valor inteiro de cada byte. Neste exemplo, estou indo para converter o byte para uma representação de seqüência hexadecimal usando toString (16), construir uma seqüência de caracteres longa e exibir a seqüência de caracteres para o usuário. Aqui está o exemplo completo de trabalho. lt DOCTYPE HTML cabeça gt lt html gt lt gt título 160160160160 lt gtReading dados binários com a API de arquivos e JavaScriptlt título gt cabeça lt gt lt gt160160160160160160160160160160160160160160160160160160160160160160160160160160160160 corpo 160160160160 lt tipo id entrada quotbrowseOpenquot quotfilequot gt 160160160160 lt script type quottextjavascriptquot gt 160160160160160160160160 var FileInput document. getElementById (quotbrowseOpenquot) 160160160160160160160160 função fileInput. onchange () 160160160160160160160160160160160160 var fr FileReader novo () 160160160160160160160160160160160160 função fr. onloadend () 160160160160160160160160160160160160160160160160 var resultado este. result 160160160160160160160160160160160160160160160160 var hex quotquot 160160160160160160160160160160160160160160160160 para (var i 0 i lt esta. result. length i) 160160160160160160160160160160160160160160160160160160160160 Var byteStr result. charCodeAt (i).toString (16) 160160160160160160160160160160160 160160160160160160160160160 se (byteStr. length lt 2) 160160160160160160160160160160160160160160160160160160160160160160160160 byteStr quot0quot byteStr 160160160160160160160160160160160160160160160160160160160160 160160160160160160160160160160160160160160160160160160160160 hex quot quot byteStr 160160160160160160160160160160160160160160160160 160160160160160160160160160160160160160160160160 alerta (hex) 160160160160160160160160160160160160 160160160160160160160160160160160160 fr. readAsBinaryString (este. files 0) 160160160160160160160160 160160160160 lt corpo do script gt lt gt lt html gtreadAsBinaryString diz que o Os dados devem ser representados como uma seqüência binária. Onde: cada byte é representado por um inteiro no intervalo 0..255. JavaScript originalmente não tinha um tipo binário (até suporte ECMAScript 5s WebGL de digitado Matriz (detalhes abaixo) - que foi substituído pelo ECMAScript 2015s ArrayBuffer) e assim eles foram com uma String com a garantia de que nenhum personagem armazenado na seqüência seria Fora do intervalo 0..255. (Eles poderiam ter ido com uma série de números em vez, mas eles não deixaram talvez grandes Strings são mais memória-eficiente do que grandes conjuntos de números, já que números são de ponto flutuante). Se você está lendo um arquivo isso é principalmente texto em um script ocidental ( Principalmente inglês, por exemplo), então essa corda vai parecer muito com texto. Se você ler um arquivo com caracteres Unicode nele, você deve notar uma diferença, uma vez que as seqüências de caracteres JavaScript são UTF-16 (detalhes abaixo) e assim alguns caracteres terão valores acima de 255, enquanto que uma seqüência binária de acordo com a especificação File API não teria Quaisquer valores acima de 255 (youd têm dois caracteres individuais para os dois bytes do ponto de código Unicode). Se você está lendo um arquivo que não é texto (uma imagem, talvez), provavelmente ainda obterá um resultado muito semelhante entre readAsText e readAsBinaryString. Mas com readAsBinaryString você sabe que não haverá qualquer tentativa de interpretar sequências de vários bytes como caracteres. Você não sabe que se você usar readAsText. Porque readAsText usará uma determinação de codificação para tentar descobrir o que é a codificação de arquivos e, em seguida, mapeá-lo para seqüências de caracteres JavaScripts UTF-16. Você pode ver o efeito se você criar um arquivo e armazená-lo em algo diferente de ASCII ou UTF-8. (No Windows você pode fazer isso via Notepad Salvar como como uma codificação drop-down com Unicode nele, por que olhar para os dados que parecem significar UTF-16 Im certeza editores Mac OS e nix tem um recurso similar.) Heres uma página que despeja o resultado da leitura de um arquivo em ambos os sentidos: Se eu usar isso com um Testing 1 2 3 arquivo armazenado em UTF-16, aqui estão os resultados que recebo: Como você pode ver, readAsText interpretou os personagens e então eu tenho 13 (o comprimento do Teste 1 2 3) e readAsBinaryString didnt, e assim eu tenho 28 (a BOM de dois bytes mais dois bytes para cada caractere). XMLHttpRequest. response com arraybuffer responseType é suportado em HTML 5. cordas JavaScript são UTF-16 pode parecer uma afirmação estranha Arent eles só Unicode Não, uma string JavaScript é uma série de UTF-16-unidades código pares substitutos como duas JavaScript indivíduo Personagens mesmo que, na verdade, o par de substituto como um todo é apenas um personagem. Consulte o link para obter detalhes. DigitalFresh: A seqüência de caracteres é os dados binários. Como você estava comentando, eu postei um exemplo que pode ajudar. O JavaScript não tem um tipo quotbinaryquot e assim eles foram com um String com a garantia de que nenhum caractere armazenado na string estaria fora do intervalo 0..255. (Eles poderiam ter ido com uma matriz de números em vez disso, mas eles didn39t.) O exemplo mostra como obter o valor bruto de um quotcharacterquot da seqüência de caracteres. Ndash T. J. Porque este material é assíncrono, ele não pode lançar exceções que você precisa olhar para a interface para ver se há alguma forma assíncrona que relata erros. E, de fato, FileReader tem onerror para isso. Quando você usa um arquivo: 4747 URL, seu domínio de documento é nulo, o que tende a fechar você fora de um monte de coisas (eu don39t saber os detalhes, eu nunca fazê-lo), esp. Quando o SOP entra nele. I39m com certeza ele é até o navegador, pelo menos por enquanto, como a parte de segurança da especificação ainda é provisória: w3.orgTRFileAPIsecurity-discussão Mas eu wouldn39t esperar que ele funcione. Ndash T. J. Muitos agradecimentos TJCrowder - Eu deletei o meu comentário para evitar que outros se deixem enganar por minha simplificação excessiva, e obrigado por postar os detalhes - Tenho certeza de que outros acharão seus comentários muito mais úteis (e lendo o Artigo é realmente uma boa idéia, como você diz, se um é mucking ao redor nesta área). Ndash Brian M. Hunt Dec 30 14 às 14: 16 Trabalhando com arquivos em JavaScript, Parte 2: FileReader Postado em 15 de maio de 2012 por Nicholas C. Zakas Em meu post anterior. Eu introduzi usando arquivos em JavaScript, focando especificamente em como obter acesso a objetos File. Esses objetos contêm metadados de arquivos obtidos somente quando o usuário opta por carregar um arquivo ou arrastar e soltar um arquivo na página da Web. Depois de ter arquivos, no entanto, o próximo passo é ler os dados deles. O tipo FileReader O tipo FileReader tem um único trabalho: para ler dados de um arquivo e armazená-lo em uma variável JavaScript. A API foi intencionalmente projetada para ser semelhante a XMLHttpRequest, uma vez que ambos estão carregando dados de um recurso externo (fora do navegador). A leitura é feita assincronamente para não bloquear o navegador. Há vários formatos que um FileReader pode criar para representar os dados do arquivo e o formato deve ser solicitado ao solicitar que o arquivo seja lido. A leitura é feita através da chamada de um destes métodos: readAsText () 8211 retorna o conteúdo do arquivo como texto simples readAsBinaryString () 8211 retorna o conteúdo do arquivo como uma seqüência de dados binários codificados (depreciado 8211 use readAsArrayBuffer () instead) readAsArrayBuffer () O conteúdo do arquivo como um ArrayBuffer (bom para dados binários, como imagens) readAsDataURL () 8211 retorna o conteúdo do arquivo como um URL de dados Cada um desses métodos inicia um arquivo semelhante ao método send () do objeto XHR que inicia uma solicitação HTTP. Como tal, você deve ouvir o evento de carga antes de começar a ler. O resultado da leitura é sempre representado por event. target. result. Por exemplo: Este exemplo simplesmente lê o conteúdo de um arquivo e o salta em texto sem formatação para o console. O manipulador onload é chamado quando o arquivo é lido com êxito enquanto o manipulador onerror é chamado se o arquivo wasn8217t lido por algum motivo. A instância FileReader está disponível dentro do manipulador de eventos via event. target e it8217s recomendado usar isso em vez de referenciar a variável de leitor diretamente. A propriedade result contém o conteúdo do arquivo sobre o sucesso eo erro contém informações de erro sobre a operação com falha. Leitura de dados URIs Você pode usar a mesma configuração básica para ler para um URI de dados. URIs de dados (às vezes chamados URLs de dados) são uma opção interessante se você quiser, por exemplo, exibir uma imagem que acabou de ser lida do disco. Você poderia fazer isso com o seguinte código: Este código simplesmente insere uma imagem que foi lida do disco em uma página. Como o URI de dados contém todos os dados de imagem, ele pode ser passado diretamente para o atributo src de uma imagem e exibido na página. Você poderia, alternadamente, carregar a imagem e desenhá-la em um ltcanvasgt também: Este código carrega os dados da imagem em um novo objeto Image e, em seguida, usa isso para desenhar a imagem em uma tela (especificando a largura ea altura como 100). URIs de dados são geralmente utilizados para esta finalidade, mas podem ser usados em qualquer tipo de arquivo. O caso de uso mais comum para a leitura de um arquivo em um URI de dados é exibir o conteúdo do arquivo em uma página da web imediatamente. Leitura ArrayBuffers O ArrayBuffer tipo 1 foi introduzido pela primeira vez como parte do WebGL. Um ArrayBuffer representa um número finito de bytes que podem ser usados para armazenar números de qualquer tamanho. A maneira como os dados são lidos de um ArrayBuffer é usando uma exibição específica, como Int8Array. Que trata os bytes subjacentes como uma coleção de inteiros assinados de 8 bits ou Float32Array. Que trata os bytes subjacentes como uma coleção de números de ponto flutuante de 32 bits. Estes são chamados matrizes digitadas 2. que forçá-lo a trabalhar com um tipo numérico específico em vez de conter qualquer tipo de dados (como com matrizes tradicionais). Você usa um ArrayBuffer principalmente ao lidar com arquivos binários, para ter controle mais refinado sobre os dados. It8217s além do escopo deste post para explicar todos os prós e contras do ArrayBuffer. Basta perceber que você pode ler um arquivo em um ArrayBuffer muito facilmente se você precisar dele. Você pode passar um ArrayBuffer diretamente para um método send () para enviar os dados brutos para o servidor (você terá que ler esses dados da solicitação no servidor para reconstruir o arquivo), desde que seu navegador suporte totalmente XMLHttpRequest Level 2 3 (navegadores mais recentes, incluindo o Internet Explorer 10 eo Opera 12). Ler dados de um arquivo usando um FileReader é muito simples. Se você souber como usar XMLHttpRequest. Não há razão para você também estar lendo dados de arquivos. Na próxima parte desta série, you8217ll aprenderá mais sobre como usar os eventos FileReader e entender mais sobre possíveis erros. Referências Disclaimer: Todos os pontos de vista e opiniões expressas neste artigo são as de Nicholas C. Zakas e não refletem, de forma alguma, as do meu empregador, meus colegas, Wrox Publishing. OReilly Publishing. Ou qualquer outra pessoa. Eu falo somente para mim, não para eles. Informações Adicionais
No comments:
Post a Comment