DOMParser og FileRead

Hva

Dersom vi skal teste parsing av en fil er det av og til litt masete å etablere en AJAX-forbindelse. Når vi jobber på den lokale harddisken kan vi enten legge fila som en stringvariable , se modulen DOMParser , eller vi kan laste den ved hjelp av FileReader. Det er det siste som demonstreres her. Mer om FileReader i modulen FileReader .

Last opp en fil

Den involverte Javascriptkoden

function handleFileSelect(evt) {
    var f = evt.target.files[0];
    found=[];
    found.push(encodeURI(f.name),'(',f.type || 'n/a', ') :  ',f.size,' bytes')
    document.getElementById('outtxtfile').innerHTML = found.join('');
    txtType = /text.*/;
    if(!f.type.match(txtType)){
        document.getElementById('filecontent').innerHTML="bad MIME type";
        return;
    }
    reader=new FileReader();
    reader.onload=function(e) {
            useIt(reader.result);
        }
    reader.readAsText(f);
}
// investigate the loaded file
function useIt(T){
  // docT is a string containg a web page
  // accumulate the result here
  var result="";
  var parser = new DOMParser();
  var doc = parser.parseFromString(T, "text/html");
  //Whatever you want to extract or count
  var divs=doc.getElementsByTagName("div");
  var title="";
  try{
      title=doc.getElementsByTagName("title")[0].innerHTML;
  }
  catch(e){
      title=" uten tittel ";
  }
  document.getElementById("filecontent").innerHTML=
    "Documentet " +title+" har "+
    divs.length+
    " div-elementer";
}

Den involverte HTML-koden

<p> Last opp en fil
<input type="file"  autocomplete="off" id="txtfile" accept="text/html"/>
</p>
<output id="outtxtfile"> </output>
<p style="max-width:400px;color:blue" id="filecontent"> </p>

Nå siden er lastet kjører:

document.getElementById('txtfile')
	.addEventListener('change', handleFileSelect, false);

Siden vi får tak i teksten som text kan vi altså kjøre parseren med parametere som demonstrert i modulen DOMParser . Det betyr at vi kan f.esk. lese og teste XML-filer på samme måte.

Du kan test og kopiere kode fra en enklere side:
demo.html https://borres.hiof.no/wep/htm/dparsefload/demo.html