<!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"><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">></div></span>
<span style="color: #f92672"><script></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">'<div class="col-sm-6 col-md-4">'</span><span style="color: #f8f8f2">;</span>
<span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">' <div class="thumbnail">'</span><span style="color: #f8f8f2">;</span>
<span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">' <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="...">'</span><span style="color: #f8f8f2">;</span>
<span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">' <div class="caption">'</span><span style="color: #f8f8f2">;</span>
<span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">' <h4>'</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">'</h4>'</span><span style="color: #f8f8f2">;</span>
<span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">' <p>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</p>'</span><span style="color: #f8f8f2">;</span>
<span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">' </div>'</span><span style="color: #f8f8f2">;</span>
<span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">' </div>'</span><span style="color: #f8f8f2">;</span>
<span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">'</div>'</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"></script></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"><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">></span><span style="color: #ffffff">load text</span><span style="color: #f92672"></button></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"><script </span><span style="color: #a6e22e">type=</span><span style="color: #e6db74">"text/javascript"</span><span style="color: #f92672">></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">&&</span> <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">parentNode</span> <span style="color: #f92672">&&</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"></script></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>
|
Download
