Lokale filer

Hva

Tilgang til lokale filer fra HTML5

Heldigvis er det slik at vi ikke uten videre kan lese lokale filer fra den maskinen som kjører websidene vår. Vi kan heller ikke skrive til den uten videre. Begge deler er mulig, men de fordrer et initiativ og kontroll fra brukeren.

Lese. Vi vet at vi kan bruke input-elementet av type file in en form. Se f.eks. modulen Forms Files . Når vi setter opp et slikt element får vi en "browse"-button og vi kan lokalisere filer på harddisken. Når vi så submitter formen går fila med. I denne modulen skal vi se at vi kan gripe inn og laste opp fila direkte. Vi skal også se at vi kan bruke "drag and drop" mulighetene i HTML5 til å plukke opp filer.

Skrive. Vi har få muligheter for å skrive fra websiden til den lokal harddisken. Vi kan spare hele vevsiden, vi kan bruke copy-paste på tekst vi er interessert i, eller vi kan spesielt for bilder høyre-klikke og "Save Image as".

Det vi skal gjøre er basert på W3C's File API [1] . Denne skal altså hjelpe oss å handtere, lese, lokale filer i litt forskjellige formater og på forskjellig måte. De sentrale begrepene er:

File er en fil med informasjon som navn, mimetype og referanse til selve filinnholdet, alt bare for lesing.
FileList er en list av File-objekter
FileReader er en leser som kan lese innholdet av et File-objekt.
Blob gir oss mulighet for å lese deler av et filinnhold.

Siden vi beveger oss litt i kanten av hva alle nettlesere handterer kan vi sjekke tilstanden med følgende script:

if (window.File && window.FileReader && window.FileList &&window.Blob) {
  // ok we do nothing
} else {alert('The File API is not fully supported ny your browser');}

En FileReader leser en fil asynkront. De viktigste metodene:

readAsText(blob|file, encoding)
readAsDataURL(blob|file)
readAsArrayBuffer(blob|file)

De to første er brukt nedenfor. Det er interessant å merke seg at det formatet som lages av readAsdataURL er det samme formatet som vi kan bruke både som kilde til et bilde i en Canvas og som src i et img-element, se Wikipedia [2] .

Nedenfor skal vi laste bilder og tekst både ved hjelp av å browse lokalmaskinen og ved hjelp av HTML5' drag and drop.

Når vi så har fått tak i datene, kan vi selvsagt bearbeide dem, legge dem ut på siden for "copy and paste" eller vi kan sende dem til serveren med f.eks. et Ajax kall. I eksemplene nedefor er det bare gjort viderebehandling av lastede bilder. Her kan du tegne rett på bildet (lagret i en canvas, ved hjelp av et enkelt processig-skript, se modulen Processing .

Bilder

Last opp en fil

Fast bildebredde:

Originalbilde
(skalert)

Canvas
tegn med mus

Resultat. Høyreklikk og
"Save Image As .."

Den involverte Javascriptkoden er slik:

// copy data fra canvas to img element src
function copyToImage(canvasID,imID){
    var canvas=document.getElementById(canvasID);
    var dataU=canvas.toDataURL();
    var resElt=document.getElementById(imID);
    resElt.innerHTML = 
          ['<img class="image" src="', dataU,'"/>'].join('');
    changeCSSRule('.result','display','inline-block');
}
// load image data to a canvas
function loadCanvas(canvasID,W,H,dataURL) {
    var canvas = document.getElementById(canvasID);
    // set size of canvas to match image
    canvas.width=W;
    canvas.height=H;
    var context = canvas.getContext("2d");
    // load image from dataURL format
    var im = new Image();
    im.onload=function(){
        context.drawImage(im,0,0,canvas.width,canvas.height);
    }
    im.src = dataURL;
}
// copy image data from an image container to a canvas
function copyToCanvas(imContainerID,canvasID){
    changeCSSRule('.drawable','display','inline-block');
    var imgElt=document.getElementById(imContainerID).firstChild;
    var W=imgElt.width;
    var H=imgElt.height;    
    loadCanvas(canvasID,W,H,imgElt.src);
}
// handle users selection of image
function handleFileSelect1(evt) {
    var files = evt.target.files; 
    var fil=files[0];
    
    // only care about image files.
    if (!fil.type.match('image.*')) {
        alert('This is a file of type: '+fil.type+'\n Load an image file');
        return;
     }
    
    var reader = new FileReader();
    // Closure to capture the file information.
    reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var outElt=document.getElementById('showFile');
          outElt.innerHTML = 
          ['<img class="image" src="', e.target.result,
           '" title="', escape(theFile.name), '"/>'].join('');
           
          changeCSSRule('.original','display','inline-block');
          setTimeout("copyToCanvas('showFile','fileCanvas')",1000);
          // allow alternative scaling: changeCSSRule('.imagescale','display','inline-block');
        };        
      }      
      )(fil);  
      // Read in the image file as a data URL.
      reader.readAsDataURL(fil);
 }
 
 // manipulate CSS
function changeCSSRule(rule,name,val)
{
    // searching from end to make faster
    var count=document.styleSheets.length;
    for(s=count-1; s > 0; s--){
        var myrules=document.styleSheets[s].cssRules;
        for(i=0; i < myrules.length; i++)
         if(myrules[i].selectorText==rule)
             for(p in myrules[i].style)
                 if(myrules[i].style[p] == name){
                    myrules[i].style.setProperty(name,val,null);
                    return;
                }
    }
} 
   
// change width of image and canvas
function setImageWidth(){
    var W=document.getElementById('imageWidth').value;
    changeCSSRule('.image','width',W);
}
// take the project away
function removeProject(){
    changeCSSRule('.original','display','none');
    changeCSSRule('.drawable','display','none');
    changeCSSRule('.result','display','none');
}
// set up
function initLoadIM(){
    document.getElementById('files').addEventListener('change', handleFileSelect1, false);
    document.getElementById('imageWidth').value="300px";
    var W=document.getElementById('imageWidth').value;
    changeCSSRule('.image','width',W);
}

Selve tegningen som du kan gjøre på canvas er implementert ved hjelp av processing og pde-skriptet er slik:

 /**
 A point: x,y and mousestatus m
 m=0: released
 m=1: pressed
 This version of the code is simple 
 and use fixed color and width
*/
ArrayList PTS=null;
int lastX=-1;
int lastY=-1;
int strokeWidth=3;
int strokeColor=unhex("FF000000");
void setup() {
  smooth();
  background(255, 255, 255);
  frameRate(50);
  PTS=new ArrayList();
  strokeWeight(strokeWidth);
  stroke(strokeColor);
}
class MP{
  public int x,y,m;
  public MP(int x, int y,int m){
    this.x=x; this.y=y; this.m=m;
  }
}
// add latest point
void draw() {
  if(mousePressed){
    if((lastX != mouseX)||(lastY != mouseY))
        PTS.add(new MP(mouseX,mouseY,1));
    lastX=mouseX;
    lastY=mouseY;
    if(PTS.size() > 1){
        MP P=(MP)PTS.get(PTS.size()-2);
        MP NP=(MP)PTS.get(PTS.size()-1);
        if(P.m == 1)
          line(P.x,P.y,NP.x,NP.y); 
    }      
  }
}
// draw everything
void reDraw(){
    for(int ix=0; ix < PTS.size();ix++){
        MP P=(MP)PTS.get(ix);
        MP NP=(MP)PTS.get(ix+1);
        if(P.m == 1){
            line(P.x,P.y,NP.x,NP.y);
        }          
    }
}
void mousePressed(){
   loop();
}
void mouseReleased(){
  PTS.add(new MP(mouseX,mouseY,0));
   noLoop();
}

Drag and Drop

Drop bildefil(er) her

Den involverte Javascriptkoden er slik:

function handleDroppedFiles(evt){
    // Avoid drop effect on page
    evt.stopPropagation();
    evt.preventDefault();
    // pick up the dropped files
    var files = evt.dataTransfer.files;
    // loop them
    for (var i = 0, f; f = files[i]; i++) {
        
        // only images
        if (!f.type.match('image.*')) {
            continue;
        }
        
        var reader = new FileReader();
        
        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {
                // add to list of thumbs
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('images').insertBefore(span, null);
            };        
          }      
          )(f);  
          // Read in the image file as a dataURL.
          reader.readAsDataURL(f);         
    }
  }
  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }
  
  function removeThumbs(wrapperID){
    document.getElementById(wrapperID).innerHTML="";
  }
  
  function initDNDIM(){
      // Setup the dnd listeners.
      var DROPS = document.getElementById('drophere');
      DROPS.addEventListener('dragover', handleDragOver, false);
      DROPS.addEventListener('drop', handleDroppedFiles, false);
  }

Text

Last opp

Den involverte Javascriptkoden er slik:

// handle users selection of text
function handleFileSelectTxt(evt) {
    var files = evt.target.files; 
    // the one and only
    var fil=files[0];
    
    // only care about image files.
    if (!fil.type.match('text.*')) {
        alert('This is a file of type: '+fil.type+'\n Load a text file');
        return;
     }
    
    var reader = new FileReader();
    // Closure to capture the file information.
    reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var outElt=document.getElementById('theTxt');
          outElt.value=e.target.result;
           
          changeCSSRule('.original','display','inline-block');
          setTimeout("copyToCanvas('showFile','fileCanvas')",1000);
          // allow alternative scaling: 
          // changeCSSRule('.imagescale','display','inline-block');
        };        
      }      
      )(fil);  
      // Read in the image file as a data URL.
      reader.readAsText(fil,"utf-8");
 }
 // set up
function initLoadTXT(){
    document.getElementById('filesTxt').
        addEventListener('change', handleFileSelectTxt, false);
}

Drag and Drop

Drop tekstfiler her

Den involverte Javascriptkoden er slik:

// accumulated text from dropped files
var ACCUM_TEXT='';
// take a drop
function handleDroppedFilesTxt(evt){
    // Avoid drop effect on page
    evt.stopPropagation();
    evt.preventDefault();
    // pick up the dropped files
    var files = evt.dataTransfer.files;
    // loop them    
    for (var i = 0, f; f = files[i]; i++) {        
        // only text
        if (!f.type.match('text.*')) {
            continue;
        }        
        var reader = new FileReader();        
        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {
                ACCUM_TEXT=ACCUM_TEXT+e.target.result;
                setTimeout(fillText,1000);
            };        
          }      
          )(f);  
        // Read in the file as text
        reader.readAsText(f,"utf-8");        
    }    
  }
  
  function handleDragOverTxt(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }
  function removeText(){
    ACCUM_TEXT='';
    fillText();
  }
  
  function fillText(){
    document.getElementById('theDroppedTxt').value=ACCUM_TEXT;
  }
  
  function initDNDTXT(){
      // Setup dnd listeners.
      var DROPS = document.getElementById('dropTxthere');
      DROPS.addEventListener('drop', handleDroppedFilesTxt, false);
      DROPS.addEventListener('dragover', handleDragOverTxt, false);
  }

Referanser

W3C FileApi dev.w3.org/2006/webapi/FileAPI/ 02-08-2012

Base64 Wikipedia en.wikipedia.org/wiki/Base64 02-08-2012

HTML5Rocks www.html5rocks.com 15-04-2011

Vedlikehold

B. Stenseth, august 2012

( Velkommen ) HTML >Lokale filer ( iframe )