Implementarile File API

Unul dintre lucrurile care mi se par captivante este interaciunea cu fisierele si ameliorarea formularelor – probabil, pentru ca am petrecut atatia ani incercand sa gasim solutii, alternative cu Flash si lucruri de genul acesta. Insa acum avem in sfarsit instrumente bune pentru operatiuni cu fisierele direct in browserul web.

In primul rand, simplu, dar atat de necesar, elementul input are acum un atribut multiple pentru a-l folosi daca atributul type are valoarea fisier.Aceasta inseamna ca utilizatorul poate naviga prin fisierele de pe hard diskul local si alege mai mult de unul. Magie nu-i asa?

<input id=”files-upload” type=”file” multiple>

Atunci cand unul sau mai multe fisiere au fost selectate sau plasate pe un element folosind API-ul Drag and drop pe care l-am mentionat mai sus, putem accesa si citi mai multe informatii despre ele. Proprietatile importante ale fisierului la care aveti acces sunt numele, dimensiunea si tipul. In acest fel devine usor sa blocati fisiere mai mari de 2 MB sau sa interziceti un anumit tip de fisiere(cele executabile, de exemplu).

var filesupload=document.getElementById(“filesupload”);

filesupload.onchange=function() {

//acces to data about all files

var files=this.files,file;

for(var i=0, l=files.length;i<l;i++) {

file =file[i];

file.name;

//get the name of the file

file.size;

//get the size of the file, in bytes

file.type;

//get the tye of file

}

};

Sa spunem ca utilizatorul alege o serie de fisiere imagine. O optiune dezirabila ar fi sa afisati miniaturile acelor fisiere direct in browser. O sa incepem prin crearea unei zone de interactiune dintr-o lista neordonata:

<ul id=”preview-list”></ul>

Apoi folosim ObjectURL, care la momentul actual sunt suportate in Firefox si Chrome, pentru a crea acele miniaturi. In cazul in care tehnica nu este suportata, ne intoracem la implementarile FileReader API. Rezultatul obtinut dupa folosirea ObjectURL sau FileReader este apoi transmis catre atributul src al imaginii create dinamic in pagina.

var preview=document.getElementById(“preview-list”);

function createPreview(file) {

var li=document.createElement(“img”),

img=document.createElement(“img”);

li.appendChild(img);

//get window.URL object

var URL=window.URL || window.webkitURL;

//check if support exists

if (URL && URL.createObjectURL) {

//create ObjectURL

var imgURL=URL

createObjectURL(file);

//set img src to ObjectURL

img.src=imgURL;

//for performance reasons, revoke used ObjectURLs

URL.revokeObjectURL(imgURL);

}

else if(typeof FileReader !== “undefined”&&(/image/i).test(file.type)) {

var reader=new FileReader();

reader.onload=function(evt) {

img.src=evt.target.result;

};

reader.readAsDataURL(file);

}

}

for (var i=0, l=files.length; i<l; i++) {

createPreview(files[i]);

}

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>