javascript - HTML5: readAsDataURL -

i have added eventlisterner code register, if user has dragged image browser. want src of image. i'm working locally xampp. not work. console says "anonymous function" , uncaught error.

    document.body.addeventlistener('drop', function (e) {     e.stoppropagation();     e.preventdefault();     file = e.datatransfer.files[0];      reader.readasdataurl( file );     console.log("dropped");     console.log("file: "+reader.readasdataurl( file ).result); }); 

here example can reference problem, shows drag , drop method, , file chooser method. can't more specific code have provided snippet, have not provided full error shown in console , don't have jsfiddle demonstrates issue.

css

#progress_bar {     margin: 10px 0;     padding: 3px;     border: 1px solid #000;     font-size: 14px;     clear: both;     opacity: 0;     -moz-transition: opacity 1s linear;     -o-transition: opacity 1s linear;     -webkit-transition: opacity 1s linear; } #progress_bar.loading {     opacity: 1.0; } #progress_bar .percent {     background-color: #99ccff;     height: auto;     width: 0; } #display {     width: 500px;     height: 150px; } div#drop_div {     width:400px;     height:300px;     background:#ccc;     border:10px dotted #aaa;     text-align:center;     font:22px georgia;     color:#666;     line-height:300px; } 

html

<input type="file" id="files" name="file" /> <button id="cancel">cancel read</button> <ul id="list"></ul> <div id="drop_div">drag , drop file here</div> <div id="progress_bar">     <div class="percent">0%</div> </div> <div>base64 encoded result</div> <textarea id="display"></textarea> 

javascript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */ /*global global */  (function (global) {     "use strict";      var reader,         progress,         display,         ifiles,         bcancel,         dropzone,         filebox,         list;      function abortread() {         if (reader) {             reader.abort();         }     }      function errorhandler(evt) {         switch (evt.target.error.code) {             case evt.target.error.not_found_err:                 alert("file not found!");                 break;             case evt.target.error.not_readable_err:                 alert("file not readable");                 break;             case evt.target.error.abort_err:                 break; // noop             default:                 alert("an error occurred reading file.");         };     }      function updateprogress(evt) {         // evt progressevent.         if (evt.lengthcomputable) {             var percentloaded = math.round((evt.loaded / evt.total) * 100);             // increase progress bar length.             if (percentloaded < 100) {                 progress.style.width = percentloaded + "%";                 progress.textcontent = percentloaded + "%";             }         }     }      function read(file) {         var output = [];          output.push('<li><strong>', escape(file.name), '</strong> (', file.type || 'n/a', ') - ',         file.size, ' bytes, last modified: ',         file.lastmodifieddate ? file.lastmodifieddate.tolocaledatestring() : 'n/a',             '</li>');          list.innerhtml = '<ul>' + output.join('') + '</ul>';          // reset progress indicator on new file selection.         progress.style.width = "0%";         progress.textcontent = "0%";          reader = new filereader();         reader.onerror = errorhandler;         reader.onprogress = updateprogress;         reader.onabort = function (e) {             alert('file read cancelled');         };          reader.onloadstart = function (e) {             document.getelementbyid('progress_bar').classname = 'loading';         };          reader.onload = function (e) {             // ensure progress bar displays 100% @ end.             progress.style.width = "100%";             progress.textcontent = "100%";             settimeout("document.getelementbyid('progress_bar').classname='';", 2000);             display.value = e.target.result;         }          // read in image file binary string.         reader.readasdataurl(file);     }      function handlefileselect(evt) {         read(evt.target.files[0]);     }      function handlefiledropselect(evt) {         evt.stoppropagation();         evt.preventdefault();          read(evt.datatransfer.files[0]);     }      function handledragover(evt) {         evt.stoppropagation();         evt.preventdefault();         evt.datatransfer.dropeffect = 'copy'; // explicitly show copy.     }      global.addeventlistener("load", function onload() {         global.removeeventlistener("load", onload);         progress = document.queryselector(".percent");         display = document.getelementbyid("display");         ifiles = document.getelementbyid("files");         bcancel = document.getelementbyid("cancel");         dropzone = document.getelementbyid("drop_div");         filebox = document.getelementbyid("filebox");         list = document.getelementbyid("list");          dropzone.addeventlistener("dragover", handledragover, false);         dropzone.addeventlistener("drop", handlefiledropselect, false);         ifiles.addeventlistener("change", handlefileselect, false);         bcancel.addeventlistener("click", abortread, false);     }, false); }(window)); 

on jsfiddle