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 estar disponíveis para editar 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 lida com readAsBinaryString só está disponível para usar uma vez todo o arquivo ou blob foi lido pelo FileReader. Nosso código no manipulador de eventos onchange agora parece assim. 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. Este é 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 roteiro gt lt corpo gt lt html gtWorking com ficheiros em JavaScript, Parte 2: FileReader Postado em 15 de maio de 2017 por Nicholas C. Zakas No 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: 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. Existem 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 ligando para um destes métodos: readAsText () 8211 retorna o conteúdo do arquivo como readAsBinaryString texto simples () 8211 retorna o conteúdo do arquivo como uma seqüência de dados binários codificados (reprovado 8211 utilização readAsArrayBuffer () em vez) readAsArrayBuffer () 8211 retornos 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 ler semelhante ao XHR object8217s send () método de iniciar 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ê pode fazer isso com o seguinte código: Este código simplesmente insere uma imagem que foi lida do disco em uma página. Uma vez que o URI de dados contém todos os dados da imagem, ele pode ser passado diretamente no atributo src de uma imagem e exibido na página. Você poderia, alternadamente, carregar a imagem e desenhá-la em um ltcanvasgt bem: Este código carrega os dados de imagem em um novo objeto de imagem e, em seguida, usa isso para desenhar a imagem em uma tela (especificando a largura e 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 em um XHR object8217s enviar () para enviar os dados brutos para o servidor (you8217ll tem que ler esses dados a partir da solicitação no servidor para reconstruir o arquivo), desde que o seu navegador suporta totalmente XMLHttpRequest Nível 2 3 (navegadores mais recentes, incluindo o Internet Explorer 10 eo Opera 12). Ler dados de um arquivo usando um FileReader é bastante 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. Mensagens recentes Additional InformationFileReader. readAsBinaryString () Não-padrão Este recurso não é padrão e não está em uma pista de padrões. Não usá-lo em sites de produção voltados para a Web: ele não funcionará para todos os usuários. Pode haver também grandes incompatibilidades entre implementações eo comportamento pode mudar no futuro. O método readAsBinaryString é usado para iniciar a leitura do conteúdo do Blob ou Arquivo especificado. Quando a operação de leitura for concluída, o ReadyState torna-se DONE. E o loadend é disparado. Nesse momento, o atributo de resultado contém os dados binários não processados do arquivo. Observe que este método está agora obsoleto conforme o rascunho de trabalho de 12 de julho de 2017 do W3C. Parâmetros blob O Blob ou Arquivo a partir do qual ler. Especificações Este método foi removido do padrão FileAPI. FileReader. readAsArrayBuffer () deve ser usado em vez disso. 1 Antes do Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos os parâmetros do Blob abaixo eram parâmetros do arquivo, desde que este foi atualizado para corresponder à especificação corretamente. Antes do Gecko 13.0 (Firefox 13.0 Thunderbird 13.0 SeaMonkey 2.10) a propriedade FileReader. error retornou um objeto FileError. Esta interface foi removida e FileReader. error agora está retornando o objeto DOMError conforme definido no último rascunho FileAPI. Este artigo foi útil Tags do documento e colaboradores Obrigado Verifique sua caixa de entrada para confirmar sua inscrição. Se você não confirmou anteriormente uma assinatura de um boletim informativo relacionado à Mozilla, talvez seja necessário fazê-lo. Verifique sua caixa de entrada ou seu filtro de spam para um e-mail de nós. Ocultar Newsletter Cadastre-se copiar 2005-2017 Mozilla Developer Network e colaboradores individuais. O conteúdo está disponível sob estas licenças. FileReader O pedido completo de leitura foi concluído. FileReader. result Somente leitura O conteúdo dos arquivos. Esta propriedade só é válida após a conclusão da operação de leitura eo formato dos dados depende de qual dos métodos foi utilizado para iniciar a operação de leitura. Manipuladores de eventos FileReader. onabort Um manipulador para o evento de aborto. Este evento é acionado toda vez que a operação de leitura é interrompida. FileReader. onerror Um manipulador para o evento de erro. Este evento é acionado toda vez que a operação de leitura encontrar um erro. FileReader. onload Um manipulador para o evento load. Este evento é acionado toda vez que a operação de leitura é concluída com êxito. FileReader. onloadstart Um manipulador para o evento loadstart. Esse evento é acionado toda vez que a leitura é iniciada. FileReader. onloadend Um manipulador para o evento loadend. Este evento é acionado toda vez que a operação de leitura é concluída (em sucesso ou falha). FileReader. onprogress Um manipulador para o evento de progresso. Este evento é acionado durante a leitura de um conteúdo Blob. Como FileReader herda de EventTarget. Todos esses eventos também podem ser ouvidos usando o método addEventListener. FileReader. abort () Aborta a operação de leitura. No retorno, o readyState será FEITO. FileReader. readAsArrayBuffer () Inicia a leitura do conteúdo do Blob especificado. Uma vez terminado, o atributo de resultado contém um ArrayBuffer que representa os dados dos arquivos. FileReader. readAsBinaryString () Inicia a leitura do conteúdo do Blob especificado. Uma vez terminado, o atributo de resultado contém os dados binários em bruto do arquivo como uma string. FileReader. readAsDataURL () Inicia a leitura do conteúdo do Blob especificado. Uma vez terminado, o atributo de resultado contém um dado: URL que representa os dados dos arquivos. FileReader. readAsText () Inicia a leitura do conteúdo do Blob especificado. Uma vez terminado, o atributo de resultado contém o conteúdo do arquivo como uma seqüência de texto. Especificações 1 Antes de Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos os parâmetros Blob abaixo foram parâmetros de arquivo, desde então, foram atualizados para coincidir com as especificações corretamente. Antes do Gecko 13.0 (Firefox 13.0 Thunderbird 13.0 SeaMonkey 2.10) a propriedade FileReader. error retornou um objeto FileError. Esta interface foi removida e FileReader. error agora está retornando o objeto DOMError conforme definido no último rascunho FileAPI. Este artigo foi útil Tags do documento e colaboradores Obrigado Verifique sua caixa de entrada para confirmar sua inscrição. Se você não confirmou anteriormente uma assinatura de um boletim informativo relacionado à Mozilla, talvez seja necessário fazê-lo. Por favor, verifique a sua caixa de entrada ou o seu filtro de spam para um e-mail de nós. Ocultar Newsletter Cadastre-se copiar 2005-2017 Mozilla Developer Network e colaboradores individuais. O conteúdo está disponível sob estas licenças.
Comments
Post a Comment