Icontem

File: index.html

Recommend this page to a friend!
  Classes of Andras Toth  >  Multifunctional File Reader  >  index.html  >  Download  
File: index.html
Role: Example script
Content type: text/plain
Description: example
Class: Multifunctional File Reader
Handle file upload and drag and drop events
Author: By
Last change: fix
Date: 3 years ago
Size: 15,356 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.0">
        <meta name="description" content="">
        <meta name="author" content="Tóth András">
        <title>MultifunctionalFileReader</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/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:50px}
        </style>
    </head>
    <body>
 <div class="container">
    <div class="page-header text-center">
        <h1>HTML5 Multifunctional File Reader<br>
            <small>Download from:
                <a href="http://www.jsclasses.org/package/437-JavaScript-Multifunctional-File-Reader.html" target="_blank"> JSclasses </a>
            </small>
        </h1>
    </div>
    <h2 class="text-center">Click to select or Drop files to darkviolet bordered fields (jpg|png|svg)</h2>
    <div  class="row img-holder" style="border-style: dashed;"></div>
    <div  class="row img-holder" style="border-style: dashed;"></div>
    <h2 class="text-center">Drop files to gray bordered field (txt|html|css|js)</h2>
    <textarea class="row text-holder" style="border:2px;border-style: dashed;"></textarea>
    <h2 class="text-center">Required HTML and javascript example</h2>
<div style="background: #272822; text-align:left;width:auto;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">&quot;row img-holder&quot;</span> <span style="color: #a6e22e">style=</span><span style="color: #e6db74">&quot;border-style: dashed;&quot;</span><span style="color: #f92672">&gt;&lt;/div&gt;</span>
<span style="color: #f92672">&lt;div</span>  <span style="color: #a6e22e">class=</span><span style="color: #e6db74">&quot;row img-holder&quot;</span> <span style="color: #a6e22e">style=</span><span style="color: #e6db74">&quot;border-style: dashed;&quot;</span><span style="color: #f92672">&gt;&lt;/div&gt;</span>
<span style="color: #f92672">&lt;textarea</span> <span style="color: #a6e22e">class=</span><span style="color: #e6db74">&quot;row text-holder&quot;</span> <span style="color: #a6e22e">style=</span><span style="color: #e6db74">&quot;border:2px;border-style: dashed;&quot;</span><span style="color: #f92672">&gt;&lt;/textarea&gt;</span>

<span style="color: #f92672">&lt;script </span><span style="color: #a6e22e">type=</span><span style="color: #e6db74">&quot;text/javascript&quot;</span> <span style="color: #a6e22e">src=</span><span style="color: #e6db74">&quot;multifunctionalfilereader.js&quot;</span><span style="color: #f92672">&gt;&lt;/script&gt;</span>
<span style="color: #f92672">&lt;script </span><span style="color: #a6e22e">type=</span><span style="color: #e6db74">&quot;text/javascript&quot;</span><span style="color: #f92672">&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">&#39;div&#39;</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">&#39;&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;  &lt;div class=&quot;thumbnail&quot;&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;    &lt;img src=&quot;&#39;</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">&#39;&quot; alt=&quot;...&quot;&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;    &lt;div class=&quot;caption&quot;&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;      &lt;h4&gt;&#39;</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">&#39;&lt;/h4&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;      &lt;p&gt;size: &#39;</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">&#39; kilobyte&lt;/p&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;    &lt;/div&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;  &lt;/div&gt;&#39;</span><span style="color: #f8f8f2">;</span>
        <span style="color: #a6e22e">str</span> <span style="color: #f92672">+=</span> <span style="color: #e6db74">&#39;&lt;/div&gt;&#39;</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: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">target</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: #66d9ef">var</span> <span style="color: #a6e22e">reader</span> <span style="color: #f92672">=</span> 
    <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">MultiFunctionalFileReader</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;.img-holder&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">[</span><span style="color: #e6db74">&#39;click&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;drop&#39;</span><span style="color: #f8f8f2">]).</span><span style="color: #a6e22e">Init</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;jpg|png|svg&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;dataURL&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">pickImage</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">);</span>
    <span style="color: #66d9ef">var</span> <span style="color: #a6e22e">reader2</span> <span style="color: #f92672">=</span> 
    <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">MultiFunctionalFileReader</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;.text-holder&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">[</span><span style="color: #e6db74">&#39;drop&#39;</span><span style="color: #f8f8f2">]).</span><span style="color: #a6e22e">Init</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;txt|html|css|js&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;text&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">function</span> <span style="color: #f8f8f2">(</span><span style="color: #a6e22e">result</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
        <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">target</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">value</span> <span style="color: #f92672">+=</span> <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">data</span><span style="color: #f8f8f2">;</span>
    <span style="color: #f8f8f2">},</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">);</span>
    <span style="color: #75715e">/*------------------------------------------ Example initialization ------------------------------------------*/</span>
    <span style="color: #a6e22e">reader</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">MultiFunctionalFileReader</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;elements&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;events array&#39;</span><span style="color: #f8f8f2">);</span>
    <span style="color: #a6e22e">reader</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">Init</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;file types&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;read as&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;callabck function&#39;</span><span style="color: #f8f8f2">);</span>
    <span style="color: #a6e22e">reader</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">Destroy</span><span style="color: #f8f8f2">();</span>                                           <span style="color: #75715e">// remove events</span>
    <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">MultiFunctionalFileReader</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;.img-holder&#39;</span><span style="color: #f8f8f2">,</span>                <span style="color: #75715e">// query selector or elements</span>
        <span style="color: #f8f8f2">[</span><span style="color: #e6db74">&#39;click&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;drop&#39;</span><span style="color: #f8f8f2">]</span>                                       <span style="color: #75715e">// events array   </span>
    <span style="color: #f8f8f2">).</span><span style="color: #a6e22e">Init</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;jpg|png|svg&#39;</span><span style="color: #f8f8f2">,</span>                                       <span style="color: #75715e">// pipe separated file types</span>
        <span style="color: #e6db74">&#39;dataURL&#39;</span><span style="color: #f8f8f2">,</span>                                              <span style="color: #75715e">// read as dataURL, binary, array, (default) -&gt; text</span>
        <span style="color: #66d9ef">function</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">result</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>                                      <span style="color: #75715e">// callback function</span>
                <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">target</span><span style="color: #f8f8f2">,</span>                                  <span style="color: #75715e">// target element</span>
                <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">data</span><span style="color: #f8f8f2">,</span>                                    <span style="color: #75715e">// data</span>
                <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">name</span><span style="color: #f8f8f2">,</span>                                    <span style="color: #75715e">// file name</span>
                <span style="color: #a6e22e">result</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">size</span>                                     <span style="color: #75715e">// file size</span>
        <span style="color: #f8f8f2">},</span> <span style="color: #66d9ef">true</span>                                                 <span style="color: #75715e">// boolean multiselect</span>
    <span style="color: #f8f8f2">);</span>
<span style="color: #f92672">&lt;/script&gt;</span>
</pre></div>
    </div>
    <script type="text/javascript" src="multifunctionalfilereader.js"></script>
    <script type="text/javascript">
        function pickImage(result) {
            var div = document.createElement('div');
            var str = '<div class="col-sm-6 col-md-4">';
            str += '  <div class="thumbnail">';
            str += '    <img src="' + result.data + '" alt="...">';
            str += '    <div class="caption">';
            str += '      <h4>' + result.name + '</h4>';
            str += '      <p>size: ' + (result.size / 1000).toString() + ' kilobyte</p>';
            str += '    </div>';
            str += '  </div>';
            str += '</div>';
            div.innerHTML = str;
            result.target.appendChild(div.children[0]);
        }
        
        var reader = new MultiFunctionalFileReader('.img-holder', ['click', 'drop']).Init('jpg|png|svg', 'dataURL', pickImage, true);
        var reader2 = new MultiFunctionalFileReader('.text-holder', ['drop']).Init('txt|html|css|js', 'text', function (result) {
            result.target.value += result.data;
        }, true);
    </script>
    </body>
</html>