JavaScript HTML5 FileReader: Read files user selected with the FileReader API

Recommend this page to a friend!
     
  Info   Example   Demos   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStar 52%Total: 240 All time: 199 This week: 4Up
Version License JavaScript version Categories
filereader 1.0.0MIT/X Consortium ...1.0HTML, Files and Folders
Description 

Author

Andras Toth

This object can read files user selected with the FileReader API.

It creates an invisible file form input on the page to let the user select one or more local files.

The object uses the HTML5 FileReader API to retrieve the contents of the files the user picked.

A given callback function when each of the selected files is loaded.

Innovation Award
JavaScript Programming Innovation award nominee
March 2015
Number 2

Prize: One downloadable e-book of choice by O'Reilly		 In the past, JavaScript code on a Web page could not access files on the user computer due to security reasons. So applications required the user to select and upload their files to the server to access their contents.

Nowadays, it is possible to access files selected by the user from his computer without having to upload them to the server, using this HTML5 FileReader API.

This object takes advantage of this API to access the files of the user computer without depending on a server to upload the files.

Manuel Lemos
Picture of Andras Toth
  Performance   Level  
Name: Andras Toth <contact>
Classes: 22 packages by
Country: Hungary Hungary
Age: 51
All time rank: 31 in Hungary Hungary
Week rank: 1 Up

Level 4 StarStarStarStar

 Innovation award
Innovation award
Nominee: 15x

Winner: 9x

Example

<!doctype html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>File reader</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css" media="screen">
        .img-holder{margin:5px;padding-top:15px;cursor:pointer;border:2px solid #9400d3;min-height:150px;border-radius:4px}.thumbnail a>img,.thumbnail>img{height:150px;margin-right:auto;margin-left:auto}h4{overflow:hidden}
        textarea{min-height:150px;overflow:auto;width:100%}.well{min-height:20px;padding:5px}.container{text-align:center}pre{background:#2d2d2d;border:0}body{padding-bottom:15px}
    </style>
  </head>
  <body>
    <h1 class="page-header text-center">HTML5 File Reader</h1>
    <div class="container">
      <h2 class="text-center">Click on darkviolet bordered field and select files (jpg|png|svg)</h2>
<div style="text-align:left;margin-bottom:15px;background: #272822; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #f92672">&lt;div</span>  <span style="color: #a6e22e">class=</span><span style="color: #e6db74">"row img-holder"</span> <span style="color: #a6e22e">onclick=</span><span style="color: #e6db74">"new fileReader().Init('jpg|png|svg', 'dataURL', pickImage, true)"</span><span style="color: #f92672">&gt;&lt;/div&gt;</span>
<span style="color: #f92672">&lt;script&gt;</span>
    <span style="color: #66d9ef">function</span> <span style="color: #a6e22e">pickImage</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">e</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
        <span style="color: #66d9ef">var</span> <span style="color: #a6e22e">div</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">document.</span><span style="color: #a6e22e">createElement</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'div'</span><span style="color: #f8f8f2">);</span>
        <span style="color: #66d9ef">var</span> <span style="color: #a6e22e">str</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">'&lt;div class="col-sm-6 col-md-4"&gt;'</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">'  &lt;div class="thumbnail"&gt;'</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">'    &lt;img src="'</span> <span style="color: #f92672">+</span> <span style="color: #a6e22e">e</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">data</span> <span style="color: #f92672">+</span> <span style="color: #e6db74">'" alt="..."&gt;'</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">'    &lt;div class="caption"&gt;'</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">'      &lt;h4&gt;'</span> <span style="color: #f92672">+</span> <span style="color: #a6e22e">e</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">name</span> <span style="color: #f92672">+</span> <span style="color: #e6db74">'&lt;/h4&gt;'</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">'      &lt;p&gt;size: '</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">(</span><span style="color: #a6e22e">e</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">size</span><span style="color: #f92672">/</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">).</span><span style="color: #a6e22e">toString</span><span style="color: #f8f8f2">()</span> <span style="color: #f92672">+</span> <span style="color: #e6db74">' kilobyte&lt;/p&gt;'</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">'    &lt;/div&gt;'</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">'  &lt;/div&gt;'</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">'&lt;/div&gt;'</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">div</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">innerHTML</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">str</span><span style="color: #f8f8f2">;</span>
        <span style="color: #f8f8f2">document.</span><span style="color: #a6e22e">querySelector</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'.img-holder'</span><span style="color: #f8f8f2">).</span><span style="color: #a6e22e">appendChild</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">div</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">children</span><span style="color: #f8f8f2">[</span><span style="color: #ae81ff">0</span><span style="color: #f8f8f2">]);</span>
    <span style="color: #f8f8f2">}</span>   
<span style="color: #f92672">&lt;/script&gt;</span>
</pre></div>
    <div class="row img-holder" onclick="new fileReader().Init('jpg|png|svg', 'dataURL', pickImage, true)">     
      </div>
      <h2 class="text-center">Click button and select files (php|html|css|txt)</h2>
      <div style="text-align:left;margin-bottom: 10px;background: #272822; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #f92672">&lt;button</span> <span style="color: #a6e22e">type=</span><span style="color: #e6db74">"button"</span> <span style="color: #a6e22e">class=</span><span style="color: #e6db74">"btn btn-success"</span> <span style="color: #a6e22e">onclick=</span><span style="color: #e6db74">"new fileReader().Init('php|html|css|txt', 'text', function (e){document.querySelector('textarea').value += e.data}, true) ;"</span><span style="color: #f92672">&gt;</span><span style="color: #ffffff">load text</span><span style="color: #f92672">&lt;/button&gt;</span></pre></div>
        <textarea></textarea>
        <br>
        <button type="button" class="btn btn-success" onclick="new fileReader().Init('php|html|css|txt', 'text', function (e){document.querySelector('textarea').value += e.data}, true) ;">load text</button>     
<div style="margin-top:15px;margin-bottom:15px;text-align:left;background: #272822; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #75715e">// Usage:</span>
<span style="color: #66d9ef">new</span> <span style="color: #a6e22e">fileReader</span><span style="color: #f8f8f2">().</span><span style="color: #a6e22e">Init</span><span style="color: #f8f8f2">(</span>
    <span style="color: #e6db74">'php|html|css|txt'</span><span style="color: #f8f8f2">,</span> <span style="color: #75715e">//pipe selected file types</span>
    <span style="color: #e6db74">'text'</span><span style="color: #f8f8f2">,</span> <span style="color: #75715e">// read file as: dataURL or binary or array or text</span>
    <span style="color: #66d9ef">function</span> <span style="color: #f8f8f2">(</span><span style="color: #a6e22e">e</span><span style="color: #f8f8f2">){},</span> <span style="color: #75715e">// callBack function return {data: e.target.result, name: theFile.name, size: theFile.size}</span>
    <span style="color: #66d9ef">true</span> <span style="color: #75715e">//    multiple file select true or false</span>
<span style="color: #f8f8f2">);</span>
</pre></div>
<div id="code" style="text-align:left;margin-bottom:15px;background: #272822; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #f92672">&lt;script </span><span style="color: #a6e22e">type=</span><span style="color: #e6db74">"text/javascript"</span><span style="color: #f92672">&gt;</span>
    <span style="color: #75715e">//HTML5 fileReader v.1.0.0</span>
    <span style="color: #75715e">//Author: Tóth András</span>
    <span style="color: #75715e">//Licence: MIT</span>
    <span style="color: #75715e">//url: http://atandrastoth.co.uk</span>
    <span style="color: #66d9ef">var</span> <span style="color: #a6e22e">fileReader</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">function</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
        <span style="color: #66d9ef">var</span> <span style="color: #a6e22e">init</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">function</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">types</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">readAs</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">callBack</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">multy</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
            <span style="color: #a6e22e">multy</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">typeof</span> <span style="color: #a6e22e">multy</span> <span style="color: #f92672">==</span> <span style="color: #e6db74">'undefined'</span> <span style="color: #f92672">?</span> <span style="color: #66d9ef">false</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">multy</span><span style="color: #f8f8f2">;</span>
            <span style="color: #66d9ef">var</span> <span style="color: #a6e22e">input</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">document.</span><span style="color: #a6e22e">createElement</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'input'</span><span style="color: #f8f8f2">);</span>
            <span style="color: #a6e22e">input</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">cssText</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">'display: none;'</span><span style="color: #f8f8f2">;</span>
            <span style="color: #a6e22e">input</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">type</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">"file"</span><span style="color: #f8f8f2">;</span>
            <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(</span><span style="color: #a6e22e">multy</span><span style="color: #f8f8f2">)</span> <span style="color: #a6e22e">input</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">multiple</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">;</span>
            <span style="color: #f8f8f2">document.</span><span style="color: #a6e22e">querySelector</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'body'</span><span style="color: #f8f8f2">).</span><span style="color: #a6e22e">appendChild</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">input</span><span style="color: #f8f8f2">);</span>
            <span style="color: #a6e22e">input</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addEventListener</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'change'</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">selectFiles</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">false</span><span style="color: #f8f8f2">);</span>
            <span style="color: #a6e22e">input</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">click</span><span style="color: #f8f8f2">();</span>

            <span style="color: #66d9ef">function</span> <span style="color: #a6e22e">selectFiles</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">evt</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
                <span style="color: #66d9ef">var</span> <span style="color: #a6e22e">files</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">(</span><span style="color: #a6e22e">evt</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">target</span> <span style="color: #f92672">||</span> <span style="color: #a6e22e">evt</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">sourceElement</span><span style="color: #f8f8f2">).</span><span style="color: #a6e22e">files</span><span style="color: #f8f8f2">;</span>
                <span style="color: #a6e22e">removeElement</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">input</span><span style="color: #f8f8f2">);</span>
                <span style="color: #66d9ef">for</span> <span style="color: #f8f8f2">(</span><span style="color: #66d9ef">var</span> <span style="color: #a6e22e">i</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">f</span><span style="color: #f8f8f2">;</span> <span style="color: #a6e22e">f</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">files</span><span style="color: #f8f8f2">[</span><span style="color: #a6e22e">i</span><span style="color: #f8f8f2">];</span> <span style="color: #a6e22e">i</span><span style="color: #f92672">++</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
                    <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(</span><span style="color: #f92672">!</span><span style="color: #a6e22e">f</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">name</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">toLowerCase</span><span style="color: #f8f8f2">().</span><span style="color: #a6e22e">match</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'(.)(.*('</span> <span style="color: #f92672">+</span> <span style="color: #a6e22e">types</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">toLowerCase</span><span style="color: #f8f8f2">()</span> <span style="color: #f92672">+</span> <span style="color: #e6db74">'))'</span><span style="color: #f8f8f2">))</span> <span style="color: #f8f8f2">{</span>
                        <span style="color: #66d9ef">continue</span><span style="color: #f8f8f2">;</span>
                    <span style="color: #f8f8f2">}</span>
                    <span style="color: #66d9ef">var</span> <span style="color: #a6e22e">reader</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">FileReader</span><span style="color: #f8f8f2">();</span>
                    <span style="color: #a6e22e">reader</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">onload</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">(</span><span style="color: #66d9ef">function</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">theFile</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
                        <span style="color: #66d9ef">return</span> <span style="color: #66d9ef">function</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">e</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
                            <span style="color: #75715e">//config required data from e, theFile</span>
                            <span style="color: #a6e22e">callBack</span><span style="color: #f8f8f2">({</span><span style="color: #a6e22e">data</span><span style="color: #f92672">:</span> <span style="color: #a6e22e">e</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">target</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">result</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #a6e22e">theFile</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">name</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">size</span><span style="color: #f92672">:</span> <span style="color: #a6e22e">theFile</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">size</span><span style="color: #f8f8f2">});</span>
                        <span style="color: #f8f8f2">};</span>
                    <span style="color: #f8f8f2">})(</span><span style="color: #a6e22e">f</span><span style="color: #f8f8f2">);</span>
                    <span style="color: #66d9ef">switch</span> <span style="color: #f8f8f2">(</span><span style="color: #a6e22e">readAs</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
                        <span style="color: #66d9ef">case</span> <span style="color: #e6db74">'dataURL'</span><span style="color: #f92672">:</span>
                            <span style="color: #a6e22e">reader</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">readAsDataURL</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">f</span><span style="color: #f8f8f2">);</span>
                            <span style="color: #66d9ef">break</span><span style="color: #f8f8f2">;</span>
                        <span style="color: #66d9ef">case</span> <span style="color: #e6db74">'binary'</span><span style="color: #f92672">:</span>
                            <span style="color: #a6e22e">reader</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">readAsBinaryString</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">f</span><span style="color: #f8f8f2">);</span>
                            <span style="color: #66d9ef">break</span><span style="color: #f8f8f2">;</span>
                        <span style="color: #66d9ef">case</span> <span style="color: #e6db74">'array'</span><span style="color: #f92672">:</span>
                            <span style="color: #a6e22e">reader</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">readAsArrayBuffer</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">f</span><span style="color: #f8f8f2">);</span>
                        <span style="color: #66d9ef">default</span><span style="color: #f92672">:</span>
                            <span style="color: #a6e22e">reader</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">readAsText</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">f</span><span style="color: #f8f8f2">);</span>
                    <span style="color: #f8f8f2">}</span>
                <span style="color: #f8f8f2">}</span>
            <span style="color: #f8f8f2">}</span>
        <span style="color: #f8f8f2">};</span>

        <span style="color: #66d9ef">function</span> <span style="color: #a6e22e">removeElement</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">element</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
            <span style="color: #a6e22e">element</span> <span style="color: #f92672">&amp;&amp;</span> <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">parentNode</span> <span style="color: #f92672">&amp;&amp;</span> <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">parentNode</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">removeChild</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">element</span><span style="color: #f8f8f2">);</span>
        <span style="color: #f8f8f2">}</span>
        <span style="color: #66d9ef">return</span> <span style="color: #f8f8f2">{</span>
            <span style="color: #a6e22e">Init</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">function</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">types</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">readAs</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">callBack</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">multy</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
                <span style="color: #a6e22e">init</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">types</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">readAs</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">callBack</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">multy</span><span style="color: #f8f8f2">);</span>
            <span style="color: #f8f8f2">}</span>
        <span style="color: #f8f8f2">}</span>
    <span style="color: #f8f8f2">};</span>
<span style="color: #f92672">&lt;/script&gt;</span>
</pre></div>
<button type="button" class="btn btn-info" onclick="getCode();">Get Class</button>   
    </div>
    <script type="text/javascript">
    var fileReader = function() {
        var init = function(types, readAs, callBack, multy) {
            multy = typeof multy == 'undefined' ? false : multy;
            var input = document.createElement('input');
            input.style.cssText = 'display: none;';
            input.type = "file";
            if (multy) input.multiple = true;
            document.querySelector('body').appendChild(input);
            input.addEventListener('change', selectFiles, false);
            input.click();

            function selectFiles(evt) {
                var files = (evt.target || evt.sourceElement).files;
                removeElement(input);
                for (var i = 0, f; f = files[i]; i++) {
                    if (!f.name.toLowerCase().match('(.)(.*(' + types.toLowerCase() + '))')) {
                        continue;
                    }
                    var reader = new FileReader();
                    reader.onload = (function(theFile) {
                        return function(e) {
                            //config required data from e, theFile
                            callBack({data: e.target.result, name: theFile.name, size: theFile.size});
                        };
                    })(f);
                    switch (readAs) {
                        case 'dataURL':
                            reader.readAsDataURL(f);
                            break;
                        case 'binary':
                            reader.readAsBinaryString(f);
                            break;
                        case 'array':
                            reader.readAsArrayBuffer(f);
                        default:
                            reader.readAsText(f);
                    }
                }
            }
        };

        function removeElement(element) {
            element && element.parentNode && element.parentNode.removeChild(element);
        }
        return {
            Init: function(types, readAs, callBack, multy) {
                init(types, readAs, callBack, multy);
            }
        }
    };

    function pickImage(e) {
        var div = document.createElement('div');
        var str = '<div class="col-sm-6 col-md-4">';
        str += '  <div class="thumbnail">';
        str += '    <img src="' + e.data + '" alt="...">';
        str += '    <div class="caption">';
        str += '      <h4>' + e.name + '</h4>';
        str += '      <p>size: ' + (e.size/1000).toString() + ' kilobyte</p>';
        str += '    </div>';
        str += '  </div>';
        str += '</div>';
        div.innerHTML = str;
        document.querySelector('.img-holder').appendChild(div.children[0]);
    }
    function getCode(){
        var codeWindow = window.open("", "codeWindow", "width=800, height=850");
        codeWindow.document.write('<html><body>' + document.querySelector('#code').innerText.replace(/script/g, 'pre')+ '</body></html>');
    };   
    </script>
    <!--<img src="http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="http://atandrastoth.co.uk" onclick="var win = window.open(this.getAttribute('alt'), '_blank');win.focus();">-->
  
</body></html>

  demoExternal page  
  Files folder image Files (2)  
File Role Description
Plain text file filereader.js Class html5 filereader
Accessible without login Plain text file index.html Example demo

Downloadfilereader-2015-03-02.zip 4KB
Downloadfilereader-2015-03-02.tar.gz 3KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:240
This week:0
All time:199
This week:4Up
User Ratings User Comments (2)
 All time
Utility:75%StarStarStarStar
Consistency:58%StarStarStar
Documentation:-
Examples:91%StarStarStarStarStar
Tests:-
Videos:-
Overall:52%StarStarStar
Rank:50
  

  Applications that use this package  
html5 filereader

Add link image If you know an application of this package, send a message to the author to add a link here.