Z tym zagadnieniem spotykałem się właściwie od lat. Jednak dopiero bardziej nowoczesne rozwiązania pozwalają podejść do tego zagadnienia w sensowny sposób, niezwiązany z jedną konkretną przeglądarką.

Odczyt pliku w JavaScript i HTML5

Wśród najprostszych sposobów można wymienić wczytywanie zawartości pliku via AJAX; w przypadku jQuery można użyć metody get():

jQuery.get('test.txt', function(data) {
  alert(data);
  // process ...
  // $('#mydiv').html(data.replace('n', '<br />'));
});

Przykład on-line:

http://dominik-w.pl/tester_file_read.html

Należy pamiętać o ograniczeniach tego sposobu w dostępie do plików z lokalnego systemu plików, jak i kwestii Same-origin policy.

Idąc dalej.

Podczas różnych prac z HTML5 Canvas, spotkałem się z kodem takim jak przedstawiony poniżej, który działał tak jak należy, i to w różnych przeglądarkach (w ich nowych wersjach).

Przykład – odczyt pliku w JavaScript i wyświetlenie go na HTML5 Canvas

function loadImage() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  var imgSrc = 
    'http://dominik-w.pl/direct-code-logo-company-200x.png';

  // add file:// if user specified local path
  if (imgSrc.indexOf("//") == -1 && imgSrc.indexOf(".") != 0) {
    imgSrc = "file:///" + imgSrc;
  }

  // load file into canvas and adjust params
  var img = new Image();
  img.onload = function() {
    width = img.width;
    height = img.height;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0);

    // get image data
    try {
      imageData = ctx.getImageData(0, 0, width, height);
    } catch(e) {
      // !
      netscape.security.PrivilegeManager.
        enablePrivilege("UniversalBrowserRead");
      imageData = ctx.getImageData(0, 0, width, height);
    }
  }

  img.src = imgSrc;
}

Kod działa bardzo dobrze; obszar canvas dostosowuje się do rozmiarów obrazka.

Pełny przykład na GitHubie:

https://github.com/dominik-w/js_html5_com/blob/master/tester_canvas_file.html

Dodatkowe zasoby

Swoją drogą nie brakuje interesujących rozwiązań do pracy z plikami w JavaScript, na przykład:

– FileAPI

http://mailru.github.io/FileAPI/

– WebKit i praca z plikami

http://www.noupe.com/webdev/html5-filesystem-api-create-files-store-locally-using-javascript-webkit.html

– Reading Files Using The HTML5 FileReader API (teamtreehouse.com)

http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

– Using files from web applications (MDN):

https://developer.mozilla.org/pl/docs/Using_files_from_web_applications

– Binary – praca z plikami binarnymi w JavaScript:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

– Binary.js!

http://binaryjs.com/

Podsumowanie

Krótko i na temat. Jak widać obecnie nie ma większych problemów, aby pracować z plikami z poziomu kodu JavaScript. Miłej zabawy!

Dominik Wlazłowski

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

     

Podaj dalej: 12101