The file API is new to HTML5 and relies on file and FileReader, both of which are completed with the following code:
varFileInput= document.getElementById (' Test-image-file '), Info= document.getElementById (' Test-file-info '), preview= document.getElementById (' Test-image-preview ');//To listen for a change event:Fileinput.addeventlistener (' Change ',function () { //Clear background Image:Preview.style.backgroundImage = ' '; //Check whether the file is selected: if(!fileinput.value) {info.innerhtml= ' No file selected '; return; } //get the file reference: varFile = Fileinput.files[0]; //Get file information:info.innerhtml = ' file: ' + file.name + ' <br> ' + ' size: ' + file.size + ' <br> ' + ' Modify: ' +file.lastmodifieddate; if(File.type!== ' image/jpeg ' && file.type!== ' image/png ' && file.type!== ' image/gif ') {alert (' Not a valid picture file! '); return; } //Read file: varReader =NewFileReader (); Reader.onload=function(e) {varData= E.target.result;//' Data:image/jpeg;base64,/9j/4aaqsk ... (base64 encoding) ... 'preview.style.backgroundImage = ' url (' + Data + ') '; }; //read the file in dataurl form:reader.readasdataurl (file);});
JavaScript reads local files through the Flie API