From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../pt-br/web/api/filereader/filereader/index.html | 54 +++++++ files/pt-br/web/api/filereader/index.html | 162 +++++++++++++++++++++ files/pt-br/web/api/filereader/onload/index.html | 29 ++++ .../api/filereader/readasarraybuffer/index.html | 107 ++++++++++++++ .../api/filereader/readasbinarystring/index.html | 120 +++++++++++++++ .../web/api/filereader/readasdataurl/index.html | 111 ++++++++++++++ .../pt-br/web/api/filereader/readastext/index.html | 104 +++++++++++++ 7 files changed, 687 insertions(+) create mode 100644 files/pt-br/web/api/filereader/filereader/index.html create mode 100644 files/pt-br/web/api/filereader/index.html create mode 100644 files/pt-br/web/api/filereader/onload/index.html create mode 100644 files/pt-br/web/api/filereader/readasarraybuffer/index.html create mode 100644 files/pt-br/web/api/filereader/readasbinarystring/index.html create mode 100644 files/pt-br/web/api/filereader/readasdataurl/index.html create mode 100644 files/pt-br/web/api/filereader/readastext/index.html (limited to 'files/pt-br/web/api/filereader') diff --git a/files/pt-br/web/api/filereader/filereader/index.html b/files/pt-br/web/api/filereader/filereader/index.html new file mode 100644 index 0000000000..49b3bd389e --- /dev/null +++ b/files/pt-br/web/api/filereader/filereader/index.html @@ -0,0 +1,54 @@ +--- +title: FileReader() +slug: Web/API/FileReader/FileReader +translation_of: Web/API/FileReader/FileReader +--- +

O construtor FileReader() cria um novo FileReader.

+ +

Para mais detalhes de como usar o FileReader, veja Using files from web applications.

+ +

Sintaxe

+ +
var reader = new FileReader();
+ +

Parâmetros

+ +

Nenhum.

+ +

Exemplo

+ +

O seguinte trecho de código ilustra a criação de um objeto FileReader usando o construtor FileReader() e depois utilizando o objeto:

+ +
function printFile(file) {
+  var reader = new FileReader();
+  reader.onload = function(evt) {
+    console.log(evt.target.result);
+  };
+  reader.readAsText(file);
+}
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('File API')}}{{Spec2('File API')}}Initial definition
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/filereader/index.html b/files/pt-br/web/api/filereader/index.html new file mode 100644 index 0000000000..772159fd36 --- /dev/null +++ b/files/pt-br/web/api/filereader/index.html @@ -0,0 +1,162 @@ +--- +title: FileReader +slug: Web/API/FileReader +translation_of: Web/API/FileReader +--- +

{{ APIRef("File API")}}

+ +

Resumo

+ +

O objeto FileReader permite aplicações web ler assincronamente o conteúdo dos arquivos (ou buffers de dados puros) do computador do usuário, utilizando o objeto {{ domxref("File") }} ou {{ domxref("Blob") }} para especificar o arquivo ou os dados a serem lidos.

+ +

Objetos File podem ser obtidos a partir de um objeto {{ domxref("FileList") }} retornado como resultado da seleção de um usuário utilizando um elemento {{ HTMLElement("input") }}, a partir de uma operação de drag and drop DataTransfer, ou a partir de um mozGetAsFile() da api {{ domxref("HTMLCanvasElement") }}.

+ +

Construtor

+ +
FileReader FileReader();
+ +

Veja Using files from web applications para detalhes e exemplos.

+ +

Propriedades

+ +
+
{{domxref("FileReader.error")}} {{readonlyinline}}
+
Um {{domxref("DOMError")}} representa o erro que ocorreu durante a leitura do arquivo.
+
{{domxref("FileReader.readyState")}} {{readonlyinline}}
+
Um número indicando o estado do FileReader. Este poderá ser um dos seguintes estados {{ anch("State constants") }}.
+
{{domxref("FileReader.result")}} {{readonlyinline}}
+
O conteúdo do arquivo. Esta propriedade é válida apenas após a operação de leitura estar completa, e o formato dos dados dependem de qual método foi usado para iniciar a operação de leitura.
+
+ +

Manipuladores de eventos

+ +
+
{{domxref("FileReader.onabort")}}
+
Um manipulador para o evento {{event("abort")}}. Este evento é chamado cada vez que a operação de leitura é abortada.
+
{{domxref("FileReader.onerror")}}
+
Um manipulador para o evento {{event("error")}}. Este evento é chamado cada vez que a operação de leitura encontra um erro.
+
{{domxref("FileReader.onload")}}
+
Um manipulador para o evento {{event("load")}}. Este evento é chamado cada vez que a operação de leitura é completada com sucesso.
+
{{domxref("FileReader.onloadstart")}}
+
Um manipulador para o evento {{event("loadstart")}}. Este evento é chamado cada vez que a leitura começa.
+
{{domxref("FileReader.onloadend")}}
+
Um manipulador para o evento {{event("loadend")}}. Este evento é chamado cada vez que a operação de leitura é completada (tanto em caso de sucesso quanto de erro).
+
{{domxref("FileReader.onprogress")}}
+
Um manipulador para o evento {{event("progress")}}. Este evento é chamado durante a leitura do conteúdo de {{domxref("Blob")}}.
+
+ +
+

Nota: O FileReader herda de {{domxref("EventTarget")}}, todos estes eventos podem ser listados usando o método {{domxref("EventTarget.addEventListener()","addEventListener")}}.

+
+ +

Constantes de estado

+ + + +

Métodos

+ +
+
{{domxref("FileReader.abort()")}}
+
Aborta a operação de leitura. O retorno, no readyState será DONE.
+
{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}
+
Inicia a leitura do conteúdo do {{ domxref("Blob") }} espeficado, uma vez finalizado, o atributo result conterá um {{domxref("ArrayBuffer")}} representando os dados do arquivo.
+
{{domxref("FileReader.readAsBinaryString()")}}
+
Inicia a leitura do conteúdo do {{ domxref("Blob") }} especificado, uma vez finalizado, o atributo result conterá os dados raw binários do arquivo como  string.
+
{{domxref("FileReader.readAsDataURL()")}}
+
Inicia a leitura do conteúdo do {{ domxref("Blob") }} especificado, uma vez finalizado, o atributo result conterá um data: URL representando os dados do arquivo.
+
{{domxref("FileReader.readAsText()")}}
+
Inicia a leitura do conteúdo do {{ domxref("Blob") }} especificado, uma vez finalizado, o atributo result conterá o conteúdo do arquivo como string de  texto.
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('File API','#FileReader-interface','FileReader')}}{{Spec2('File API')}}Definição inicial.
+ +

Compatibilidade

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet Explorer*Opera*Safari
Basic support{{ CompatGeckoDesktop("1.9.2") }}71012.026.0.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support3231011.56.1
+
+ +

Notas de implementações

+ + + +

Notas específicas para Gecko

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/api/filereader/onload/index.html b/files/pt-br/web/api/filereader/onload/index.html new file mode 100644 index 0000000000..53b5774e88 --- /dev/null +++ b/files/pt-br/web/api/filereader/onload/index.html @@ -0,0 +1,29 @@ +--- +title: FileReader.onload +slug: Web/API/FileReader/onload +tags: + - Arquivo + - Event Handler + - FileReader + - Manipulador de eventos + - Propriedade +translation_of: Web/API/FileReader/onload +--- +

{{APIRef}}

+ +

A propriedade FileReader.onload contém um manipulador de eventos (event handler) executado quando o evento de carregamento ({{event('load')}})  é ativado, quando o conteúdo lido com  readAsArrayBuffer, readAsBinaryString, readAsDataURL ou readAsText fica disponível.

+ +

Exemplo

+ +
// Callback de um <input type="file" onchange="onChange(event)">
+function onChange(event) {
+  var file = event.target.files[0];
+  var reader = new FileReader();
+  reader.onload = function(event) {
+    // O arquivo de texto será impresso aqui
+    console.log(event.target.result)
+  };
+
+  reader.readAsText(file);
+}
+
diff --git a/files/pt-br/web/api/filereader/readasarraybuffer/index.html b/files/pt-br/web/api/filereader/readasarraybuffer/index.html new file mode 100644 index 0000000000..ed94bccf4b --- /dev/null +++ b/files/pt-br/web/api/filereader/readasarraybuffer/index.html @@ -0,0 +1,107 @@ +--- +title: FileReader.readAsArrayBuffer() +slug: Web/API/FileReader/readAsArrayBuffer +tags: + - API + - DOM + - File API + - FileReader + - Files + - Method + - Reference + - readAsArrayBuffer +translation_of: Web/API/FileReader/readAsArrayBuffer +--- +

{{APIRef("File API")}}

+ +

O método readAsArrayBuffer() do objeto {{domxref("FileReader")}} é utilizado para ler o conteúdo de um {{domxref("Blob")}} ou {{domxref("File")}} específico. Quando a operação de leitura é finalizada, o {{domxref("FileReader.readyState","readyState")}} torna-se DONE (finalizado), e o evento {{event("loadend")}} é acionado. Então, o atributo {{domxref("FileReader.result","result")}} retorna um {{domxref("ArrayBuffer")}} representando os dados do arquivo.

+ +

Sintaxe

+ +
instanceOfFileReader.readAsArrayBuffer(blob);
+ +

Parâmetros

+ +
+
blob
+
O {{domxref("Blob")}} ou {{domxref("File")}} que será lido.
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}{{Spec2("File API")}}Definição Inicial
+ +

Compatibilidade com Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte Básico{{CompatGeckoDesktop("1.9.2")}}[1]710[2]12.02[3]6.0.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Suporte Básico3231011.56.1
+
+ +

[1] Antes da versão 2.0 beta 7 do Gecko (Firefox 4.0 beta 7), todos os parâmetros do {{domxref("Blob")}} abaixo eram parâmetros do {{domxref("File")}}; a atualização foi realizada pra corresponder corretamente à especificação. Antes da versão 13.0 do Gecko {{geckoRelease("13.0")}} A propriedade .error do FileReader retornava um objeto {{domxref("FileError")}}. Esta interface foi removida e FileReader.error agora retorna o objeto {{domxref("DOMError")}} como definido na última versão da documentação do FileAPI.

+ +

[2] IE9 possui File API Lab.

+ +

[3] Opera suporta parcialmente na versão 11.1.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/filereader/readasbinarystring/index.html b/files/pt-br/web/api/filereader/readasbinarystring/index.html new file mode 100644 index 0000000000..5d23087951 --- /dev/null +++ b/files/pt-br/web/api/filereader/readasbinarystring/index.html @@ -0,0 +1,120 @@ +--- +title: FileReader.readAsBinaryString() +slug: Web/API/FileReader/readAsBinaryString +tags: + - API + - API Arquivos + - Arquivos + - File API + - Métodos + - Referencias(2) +translation_of: Web/API/FileReader/readAsBinaryString +--- +
{{APIRef("File API")}} {{non-standard_header}}
+ +

O método readAsBinaryString é usado para iniciar a leitura do conteúdo de um {{domxref("Blob")}} especificado, ou {{domxref("File")}}. Quando a operação de leitura é finalizada, o {{domxref("FileReader.readyState","readyState")}} se torna "DONE", e o evento {{event("loadend")}} é acionado. Neste momento, o atributo {{domxref("FileReader.result","result")}} contém o dado binário bruto do arquivo.

+ +

Note que este método se tornou obsoleto desde 12 de Julho de 2012 Working Draft do W3C.

+ +

Sintaxe

+ +
instanciaDeFileReader.readAsBinaryString(blob);
+ +

Parametros

+ +
+
blob
+
O {{domxref("Blob")}} ou {{domxref("File")}} que deseja ler.
+
+ +

Exemplo

+ +
var canvas = document.createElement('canvas');
+var height = 200;
+var width  = 200;
+
+canvas.width  = width;
+canvas.height = height;
+
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = '#090';
+ctx.beginPath();
+ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
+ctx.stroke();
+
+canvas.toBlob(function (blob) {
+  var reader = new FileReader();
+
+  reader.onloadend = function () {
+    console.log(reader.result);
+  }
+
+  reader.readAsBinaryString(blob);
+});
+ +

Especificações

+ +

Este método foi removido dos padrões FileAPI {{domxref("FileReader.readAsArrayBuffer()")}} deve ser usado no lugar dele.

+ +

Compatibilidade de Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte Básico{{CompatGeckoDesktop("1.9.2")}}[1]7{{CompatNo}}12.02[3]6.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Suporte Básico3231011.56.0
+
+ +

[1] Anteriormente ao Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos os parametros  {{domxref("Blob")}} inferiores eram parametros {{domxref("File")}}; Isso foi atualizado para combinar com as especifiações corretamente. Anteriormente ao Gecko 13.0 {{geckoRelease("13.0")}} a propriedade FileReader.error retornava um objeto {{domxref("FileError")}}. Essa interface foi removida e FileReader.error agora retorna o objeto domxref("DOMError")}} como foi definido no último draft do FileAPI.

+ +

[2] IE9 possui um File API Lab.

+ +

[3] Opera possui partial support in 11.1.

+ +

Veja Também

+ + diff --git a/files/pt-br/web/api/filereader/readasdataurl/index.html b/files/pt-br/web/api/filereader/readasdataurl/index.html new file mode 100644 index 0000000000..a922bf8bd0 --- /dev/null +++ b/files/pt-br/web/api/filereader/readasdataurl/index.html @@ -0,0 +1,111 @@ +--- +title: FileReader.readAsDataURL() +slug: Web/API/FileReader/readAsDataURL +tags: + - API + - File API + - Files + - Image Preview + - Method +translation_of: Web/API/FileReader/readAsDataURL +--- +

{{APIRef("File API")}}

+ +

O método readAsDataURL é usado para ler o conteúdo do tipo {{domxref("Blob")}} ou {{domxref("File")}}.
+ Quando a operação de leitura acaba, a flag {{domxref("FileReader.readyState","readyState")}} muda para DONE e o evento {{event("loadend")}} é disparado.
+ Então o atributo {{domxref("FileReader.result","result")}} irá conter a URL codificada em base64 do arquivo.

+ +

Sintaxe

+ +
instanceOfFileReader.readAsDataURL(blob);
+ +

Parametros

+ +
+
blob
+
O conteúdo do tipo {{domxref("Blob")}} ou {{domxref("File")}} que queremos ler.
+
+ +

Exemplo

+ +

HTML

+ +
<input type="file" onchange="previewFile()"><br>
+<img src="" height="200" alt="Prévia da imagem...">
+ +

JavaScript

+ +
function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.onloadend = function () {
+    preview.src = reader.result;
+  }
+
+  if (file) {
+    reader.readAsDataURL(file);
+  } else {
+    preview.src = "";
+  }
+}
+ +

Demo

+ +

{{EmbedLiveSample("Example", "100%", 240)}}

+ +

Exemplo de leitura com múltiplos arquivos

+ +

HTML

+ +
<input id="browse" type="file" onchange="previewFiles()" multiple>
+<div id="preview"></div>
+ +

JavaScript

+ +
function previewFiles() {
+
+  var preview = document.querySelector('#preview');
+  var files   = document.querySelector('input[type=file]').files;
+
+  function readAndPreview(file) {
+
+    // Make sure `file.name` matches our extensions criteria
+    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
+      var reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        var image = new Image();
+        image.height = 100;
+        image.title = file.name;
+        image.src = this.result;
+        preview.appendChild( image );
+      }, false);
+
+      reader.readAsDataURL(file);
+    }
+
+  }
+
+  if (files) {
+    [].forEach.call(files, readAndPreview);
+  }
+
+}
+ +
Nota: O construtor do FileReader() não é suportado  por versões anteriores à 10 do Internet Explorer. Para uma maior compatibilidade você pode ver os exemplos prévia de imagem básica ou prévia de imagem avançada.
+ +

Especificações

+ +

{{page("/pt-BR/docs/Web/API/FileReader","Specifications")}}

+ +

Compatibilidade

+ +

{{page("/pt-BR/docs/Web/API/FileReader","Browser compatibility")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/filereader/readastext/index.html b/files/pt-br/web/api/filereader/readastext/index.html new file mode 100644 index 0000000000..eb0f1582a7 --- /dev/null +++ b/files/pt-br/web/api/filereader/readastext/index.html @@ -0,0 +1,104 @@ +--- +title: FileReader.readAsText() +slug: Web/API/FileReader/readAsText +translation_of: Web/API/FileReader/readAsText +--- +
{{APIRef("File API")}}
+ +

O método readAsText é usado para ler conteúdos de um {{domxref("Blob")}} ou {{domxref("File")}} especificados. Quando a operação de leitura é concluida, o {{domxref("FileReader.readyState","readyState")}} é alterado para DONE, o {{event("loadend")}} é disparado, e o atributo {{domxref("FileReader.result","result")}} passa a conter o conteúdo do arquivo como um texto em formato string.

+ +

Sintaxe

+ +
instanceOfFileReader.readAsText(blob[, encoding]);
+ +

Parâmetros

+ +
+
blob
+
O {{domxref("Blob")}} ou {{domxref("File")}} a ser lido.
+
encoding {{optional_inline}}
+
Uma string especificando a codificação a ser usada para o dado retornado. Por padrão, UTF-8 é assumido se o parâmetro não for especificado.
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Definição inicial
+ +

Compatibilidade em navedadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Suporte básico{{CompatGeckoDesktop("1.9.2")}}[1]7{{CompatVersionUnknown}}10[2]12.02[3]6.0.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Suporte básico323{{CompatVersionUnknown}}1011.56.1
+
+ +

[1] Antes do Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos os parâmetros {{domxref("Blob")}} abaixo eram parâmetros de {{domxref("File")}}; isso desde então foi atualizado para coincidir com a especificação corretamente. Antes do Gecko 13.0 {{geckoRelease("13.0")}} a propriedade FileReader.error retornava um objeto {{domxref("FileError")}}. Essa interface foi removida e agora FileReader.error está retornando um objeto {{domxref("DOMError")}} conforme definido no último rascunho da FileAPI.

+ +

[2] IE9 tem uma File API Lab.

+ +

[3] Opera tem suporte parcial em 11.1.

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf