
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
– 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!
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!