From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/sv-se/web/api/filereader/index.html | 127 +++++++++++++++++++++ .../web/api/filereader/readasdataurl/index.html | 124 ++++++++++++++++++++ 2 files changed, 251 insertions(+) create mode 100644 files/sv-se/web/api/filereader/index.html create mode 100644 files/sv-se/web/api/filereader/readasdataurl/index.html (limited to 'files/sv-se/web/api/filereader') diff --git a/files/sv-se/web/api/filereader/index.html b/files/sv-se/web/api/filereader/index.html new file mode 100644 index 0000000000..89ebf980cd --- /dev/null +++ b/files/sv-se/web/api/filereader/index.html @@ -0,0 +1,127 @@ +--- +title: FileReader +slug: Web/API/FileReader +tags: + - API + - File API + - Files + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/FileReader +--- +
{{APIRef("File API")}}
+ +

Objektet FileReader låter webbapplikationer asynkroniserat läsa innehåll i filer sparade på användarens dator. Man använder objekten {{domxref("File")}} eller {{domxref("Blob")}} för att specificera filerna eller datan som ska läsas.

+ +

Objekt av typen File kan man få av från ett FileList-objekt till följd av att användaren har valt en fil med {{HTMLElement("input")}}, en drag-och-släpp-operations DataTransfer-objekt, eller från API:et mozGetAsFile() på ett {{domxref("HTMLCanvasElement")}}.

+ +

{{AvailableInWorkers}}

+ +

Konstruktor

+ +
+
{{domxref("FileReader.FileReader", "FileReader()")}}
+
Returnerar en nykonstruerad FileReader.
+
+ +

Se Using files from web applications för detaljer och exempel (på engelska).

+ +

Egenskaper

+ +
+
{{domxref("FileReader.error")}} {{readonlyinline}}
+
Ett {{domxref("DOMException")}} som representerar ett fel som uppstod vid inläsning av filen.
+
{{domxref("FileReader.readyState")}} {{readonlyinline}}
+
Ett nummer som indikerar vilket stadie FileReader-objektet är i. Följande värden finns: + + + + + + + + + + + + + + + + + + +
EMPTY0Ingen data har laddats ännu.
LOADING1Datan laddas just nu.
DONE2Hela läsförfrågningen är klar.
+
+
{{domxref("FileReader.result")}} {{readonlyinline}}
+
Filens innehåll. Denna egenskap är endast giltlig när operationen är färdig. Formatet på datan beror på vilken metod som användes för att initiera läsoperationen.
+
+ +

Händelsehanterare

+ +
+
{{domxref("FileReader.onabort")}}
+
Hanterar händelsen {{event("abort")}}. Denna händelse aktiveras varje gång läsoperationen avbryts.
+
{{domxref("FileReader.onerror")}}
+
A handler for the {{event("error")}} event. This event is triggered each time the reading operation encounter an error.
+
{{domxref("FileReader.onload")}}
+
A handler for the {{event("load")}} event. This event is triggered each time the reading operation is successfully completed.
+
{{domxref("FileReader.onloadstart")}}
+
A handler for the {{event("loadstart")}} event. This event is triggered each time the reading is starting.
+
{{domxref("FileReader.onloadend")}}
+
A handler for the {{event("loadend")}} event. This event is triggered each time the reading operation is completed (either in success or failure).
+
{{domxref("FileReader.onprogress")}}
+
A handler for the {{event("progress")}} event. This event is triggered while reading a {{domxref("Blob")}} content.
+
+ +
+

As FileReader inherits from {{domxref("EventTarget")}}, all those events can also be listened for by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.

+
+ +

Methods

+ +
+
{{domxref("FileReader.abort()")}}
+
Aborts the read operation. Upon return, the readyState will be DONE.
+
{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}
+
Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the result attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.
+
{{domxref("FileReader.readAsBinaryString()")}}
+
Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the result attribute contains the raw binary data from the file as a string.
+
{{domxref("FileReader.readAsDataURL()")}}
+
Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the result attribute contains a data: URL representing the file's data.
+
{{domxref("FileReader.readAsText()")}}
+
Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the result attribute contains the contents of the file as a text string.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("File API", "#dfn-filereader", "FileReader")}}{{Spec2("File API")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.FileReader")}}

+ +

See also

+ + diff --git a/files/sv-se/web/api/filereader/readasdataurl/index.html b/files/sv-se/web/api/filereader/readasdataurl/index.html new file mode 100644 index 0000000000..b7e4849bb5 --- /dev/null +++ b/files/sv-se/web/api/filereader/readasdataurl/index.html @@ -0,0 +1,124 @@ +--- +title: FileReader.readAsDataURL() +slug: Web/API/FileReader/readAsDataURL +translation_of: Web/API/FileReader/readAsDataURL +--- +

Metoden readAsDataURL används för att läsa innehållet i en specificerad {{domxref("Blob")}} eller {{domxref("File")}}. När läsningen har slutförts, så blir {{domxref("FileReader.readyState","readyState")}} DONE, och {{event("loadend")}} utlöses. Vid den tidpunkten så innehåller attributet {{domxref("FileReader.result","result")}} datan som en data: URL som representerar filens data som en base64-kodad textsträng.

+ +
+

Märk: filens {{domxref("FileReader.result","result")}} resulterar i en textsträng som ej direkt kan avkodas som Base64. För att få ut bara en Base64-kodad textsträng, måste du ta bort data:*/*;base64, från textsträngen.

+
+ +

Syntax

+ +
instanceOfFileReader.readAsDataURL(blob);
+ +

Parametrar

+ +
+
blob
+
Den {{domxref("Blob")}} eller {{domxref("File")}} som ska läsas från.
+
+ +

Exempel

+ +

HTML

+ +
<input type="file" onchange="previewFile()"><br>
+<img src="" height="200" alt="Image preview...">
+ +

JavaScript

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

Live Result

+ +

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

+ +

Exempel - läsa flera filer

+ +

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) {
+
+    // Se till att `file.name` matchar våra fil-extensions kriteria
+    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);
+  }
+
+}
+
+ +
Märk: Konstruktorn för FileReader() stöddes inte av Internet Explorer i versionerna innan 10. För en full kompatibilitetskod kan du gärna gå till crossbrowser möjlig lösning för bild förhandsvisning. Se också detta kraftfullare exempel.
+ +

Specifikationer

+ + + + + + + + + + + + + + + + +
SpecifikationStatusKommentar
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Första definitionen
+ +

Webbläsar kompatibilitet

+ + + +

{{Compat("api.FileReader.readAsDataURL")}}

+ +

Se även

+ + + +
{{APIRef("File API")}}
-- cgit v1.2.3-54-g00ecf