RSS

Wczytywanie plików tekstowych do aplikacji JavaScript

Liczba odsłon: 274

Przeglą­dar­ki WWW sto­ją na stra­ży bez­pie­czeń­stwa i pry­wat­no­ści in­ter­nau­tów. Jeszcze do nie­daw­na je­dy­nym spo­so­bem, by apli­kac­ja Java­Script mog­ła od­czy­tać za­war­tość pli­ku tek­sto­we­go, by­ło wy­sła­nie go na ser­wer za po­mo­cą for­mu­la­rza i ele­men­tu <in­put> ty­pu up­load, a na­stęp­nie po­bra­nie go z po­wro­tem do apli­kac­ji za po­mo­cą żą­da­nia AJAX. Na szczęś­cie wraz z wpro­wa­dze­niem stan­dar­du HTML 5 po­ja­wi­ła się moż­li­wość po­mi­nię­cia ko­mu­ni­kac­ji z ser­we­rem, dzię­ki cze­mu apli­kac­ja mo­że od­czy­ty­wać pli­ki du­żo szyb­ciej i bez po­łą­cze­nia z sie­cią.

Moż­li­wość bez­po­śred­nie­go od­czy­ty­wa­nia pli­ków z po­zio­mu ko­du Java­Script da­je no­wy inter­fejs File API. Nie na­ru­sza on ist­nie­ją­cych za­sad bez­pie­czeń­stwa, gdyż apli­kac­ja nie otrzy­mu­je peł­ne­go do­stę­pu do sys­te­mu pli­ków, a je­dy­nie do po­je­dyn­czych pli­ków wska­za­nych przez sa­me­go użyt­kow­ni­ka za po­mo­cą po­la dia­lo­go­we­go lub przez prze­ciąg­nię­cie ich ikon na wska­za­ne kom­po­nen­ty stro­ny.

Istnieje wie­le spo­so­bów wy­ko­rzys­ta­nia te­go me­cha­niz­mu. Zacznę od przed­sta­wie­nia naj­prost­sze­go sce­na­riu­sza, uży­wa­ją­ce­go stan­dar­do­wych ele­men­tów stron WWW oraz tech­nik pro­gra­mo­wa­nia pro­ce­du­ral­ne­go ba­zu­ją­ce­go na zda­rze­niach.

Na po­czą­tek stwo­rzy­my stro­nę WWW, któ­ra bę­dzie wy­po­sa­żo­na w dwa ele­men­ty:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Wczytywanie pliku tekstowego</title>
  <style type="text/css">
     #editor {
        width: 100%;
        height: 15em;
     }
  </style>
 </head>
 <body>
  <input type="file" id="upload"/>
  <textarea id="editor"></textarea>
 </body>
</html>

W ko­lej­nym kro­ku na­le­ży za­pi­sać funk­cję re­agu­ją­cą na zda­rze­nia wska­za­nia (lub prze­ciąg­nię­cia) pli­ku.

<script type="text/javascript">
function doUpload(uploader) {
   var reader = new FileReader();
   reader.readAsText(uploader.files[0], 'UTF-8');
   reader.onprogress = function(evt) {
      console.log('Postęp wczytywania', evt);
   };
   reader.onload = function(evt) {
      document.getElementById('editor').innerHTML = evt.target.result;
   };
   reader.onerror = function(evt) {
      alert('Błąd wczytywania pliku!');
   };
}
</script>

Teraz po­zos­ta­je już tyl­ko po­wią­zać na­pi­sa­ną funk­cję ob­słu­gi ze zda­rze­niem wska­za­nia (lub upusz­cze­nia) pli­ku.

<input type="file" id="upload" onchange="doUpload(this);"/>
<textarea id="editor"></textarea>

I go­to­we! Kliknięcie przy­ci­sku Przeglądaj i wska­za­nie pli­ku w po­lu dia­lo­go­wym lub prze­ciąg­nię­cie iko­ny pli­ku i upusz­cze­nie jej na przy­ci­sku lub ety­kie­cie spo­wo­du­je za­ła­do­wa­nie treś­ci pli­ku, zin­ter­pre­to­wa­nie jej ja­ko tek­stu za­pi­sa­ne­go za po­mo­cą ko­do­wa­nia UTF-8 i wpro­wa­dze­nie do wnęt­rza po­la edy­cyj­ne­go. Co naj­waż­niej­sze, me­cha­nizm ten nie wy­ma­ga żad­ne­go kom­po­nen­tu dzia­ła­ją­ce­go po stro­nie ser­we­ra i dzia­ła rów­nież w try­bie off-line.

Zaprezen­to­wa­ne roz­wią­za­nie ma trzy pod­sta­wo­we wa­dy:

Ze wszyst­ki­mi roz­pra­wi­my się jed­nak w ko­lej­nych częś­ciach te­go cyk­lu.

Mam na­dzie­ję, że moż­li­wość wczy­ty­wa­nia da­nych bez­po­śred­nio do apli­kac­ji sie­cio­wej, bez ko­niecz­noś­ci ko­mu­ni­ko­wa­nia się z ser­we­rem, po­pra­wi ja­kość i wy­daj­ność Waszych apli­kac­ji pi­sa­nych w Java­Script, a tak­że za­chę­ci do za­pi­sy­wa­nia w tym ję­zy­ku na­rzę­dzi prze­twa­rza­ją­cych da­ne.