JavaScript
Interfejs API plików, obiekty BLOB i czytniki plików

Składnia

• reader = new FileReader ();

Parametry

Uwagi

Odczytaj plik jako ciąg

Upewnij się, że na stronie znajduje się plik wejściowy:

<input type="file" id="upload">

Następnie w JavaScript:

document.getElementById('upload').addEventListener('change', readFileAsString)
function readFileAsString() {
    var files = this.files;
    if (files.length === 0) {
        console.log('No file is selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        console.log('File content:', event.target.result);
    };
    reader.readAsText(files[0]);
}

Odczytaj plik jako dataURL

Odczyt zawartości pliku w aplikacji internetowej można osiągnąć, korzystając z interfejsu API plików HTML5. Najpierw dodaj dane wejściowe z type="file" w swoim HTML:

<input type="file" id="upload">

Następnie dodamy detektor zmian na wejściu pliku. Ten przykład definiuje nasłuchiwanie przez JavaScript, ale można go również dodać jako atrybut elementu wejściowego. Ten detektor jest uruchamiany za każdym razem, gdy wybierany jest nowy plik. W ramach tego wywołania zwrotnego możemy odczytać wybrany plik i wykonać dalsze działania (takie jak utworzenie obrazu z zawartością wybranego pliku):

document.getElementById('upload').addEventListener('change', showImage);

function showImage(evt) {
    var files = evt.target.files;

    if (files.length === 0) {
        console.log('No files selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.onload = function() {
            document.body.appendChild(img);
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(files[0]);
}

Pokrój plik

Metoda blob.slice() służy do utworzenia nowego obiektu Blob zawierającego dane w określonym zakresie bajtów źródłowego obiektu Blob. Ta metoda jest również dostępna w przypadku instancji plików, ponieważ plik rozszerza obiekt Blob.

Tutaj kroimy plik na określoną liczbę obiektów blob. Jest to przydatne szczególnie w przypadkach, gdy trzeba przetworzyć pliki, które są zbyt duże, aby odczytać je w pamięci za jednym razem. Następnie możemy czytać fragmenty jeden po drugim za pomocą FileReader .

/**
* @param {File|Blob} - file to slice
* @param {Number} - chunksAmount
* @return {Array} - an array of Blobs
**/
function sliceFile(file, chunksAmount) {
  var byteIndex = 0;
  var chunks = [];
    
  for (var i = 0; i < chunksAmount; i += 1) {
    var byteEnd = Math.ceil((file.size / chunksAmount) * (i + 1));
    chunks.push(file.slice(byteIndex, byteEnd));
    byteIndex += (byteEnd - byteIndex);
  }

  return chunks;
}

Pobieranie csv po stronie klienta przy użyciu obiektu Blob

function downloadCsv() {
  var blob = new Blob([csvString]);
  if (window.navigator.msSaveOrOpenBlob){
    window.navigator.msSaveBlob(blob, "filename.csv");
  }
  else {
    var a = window.document.createElement("a");

    a.href = window.URL.createObjectURL(blob, {
      type: "text/plain"
    });
    a.download = "filename.csv";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
}
var string = "a1,a2,a3";
downloadCSV(string);

Źródło odniesienia; https://github.com/mholt/PapaParse/issues/175

Wybieranie wielu plików i ograniczanie typów plików

Interfejs API plików HTML5 pozwala ci ograniczyć rodzaj plików, które są akceptowane, po prostu ustawiając atrybut accept na wejściu pliku, np .:

<input type="file" accept="image/jpeg">

Określanie wielu typów MIME oddzielonych przecinkiem (np. image/jpeg,image/png ) lub używanie symboli wieloznacznych (np. image/* do zezwalania na wszystkie typy obrazów) daje szybki i skuteczny sposób na ograniczenie typu plików, które chcesz wybrać . Oto przykład dopuszczenia dowolnego obrazu lub wideo:

<input type="file" accept="image/*,video*">

Domyślnie wejście pliku pozwala użytkownikowi wybrać pojedynczy plik. Jeśli chcesz włączyć zaznaczanie wielu plików, po prostu dodaj atrybut multiple :

<input type="file" multiple>

Następnie możesz odczytać wszystkie wybrane pliki za pomocą tablicy plików wejściowych files . Zobacz odczytany plik jako dataUrl

Uzyskaj właściwości pliku

Jeśli chcesz uzyskać właściwości pliku (takie jak nazwa lub rozmiar), możesz to zrobić przed użyciem Czytnika plików. Jeśli mamy następujący fragment kodu HTML:

<input type="file" id="newFile">

Możesz uzyskać dostęp do właściwości bezpośrednio w ten sposób:

document.getElementById('newFile').addEventListener('change', getFile);

function getFile(event) {
    var files = event.target.files
        , file = files[0];

    console.log('Name of the file', file.name);
    console.log('Size of the file', file.size);
}

Można również łatwo uzyskać następujące atrybuty: lastModified (znacznik czasu), lastModifiedDate (data) i type ( type pliku)