File: index.html

Recommend this page to a friend!
  Classes of Andras Toth  >  JavaScript HTML5 FileReader  >  index.html  >  Download  
File: index.html
Role: Example script
Content type: text/plain
Description: demo
Class: JavaScript HTML5 FileReader
Read files user selected with the FileReader API
Author: By
Last change:
Date: 6 years ago
Size: 25,352 bytes
 

Contents

Class file image Download
<!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>