<!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"><div</span> <span style="color: #a6e22e">class=</span><span style="color: #e6db74">"row img-holder"</span> <span style="color: #a6e22e">style=</span><span style="color: #e6db74">"border-style: dashed;"</span><span style="color: #f92672">></div></span>
<span style="color: #f92672"><div</span> <span style="color: #a6e22e">class=</span><span style="color: #e6db74">"row img-holder"</span> <span style="color: #a6e22e">style=</span><span style="color: #e6db74">"border-style: dashed;"</span><span style="color: #f92672">></div></span>
<span style="color: #f92672"><textarea</span> <span style="color: #a6e22e">class=</span><span style="color: #e6db74">"row text-holder"</span> <span style="color: #a6e22e">style=</span><span style="color: #e6db74">"border:2px;border-style: dashed;"</span><span style="color: #f92672">></textarea></span>
<span style="color: #f92672"><script </span><span style="color: #a6e22e">type=</span><span style="color: #e6db74">"text/javascript"</span> <span style="color: #a6e22e">src=</span><span style="color: #e6db74">"multifunctionalfilereader.js"</span><span style="color: #f92672">></script></span>
<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: #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: #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">'.img-holder'</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">[</span><span style="color: #e6db74">'click'</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">'drop'</span><span style="color: #f8f8f2">]).</span><span style="color: #a6e22e">Init</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'jpg|png|svg'</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">'dataURL'</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">'.text-holder'</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">[</span><span style="color: #e6db74">'drop'</span><span style="color: #f8f8f2">]).</span><span style="color: #a6e22e">Init</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'txt|html|css|js'</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">'text'</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">'elements'</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">'events array'</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">'file types'</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">'read as'</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">'callabck function'</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">'.img-holder'</span><span style="color: #f8f8f2">,</span> <span style="color: #75715e">// query selector or elements</span>
<span style="color: #f8f8f2">[</span><span style="color: #e6db74">'click'</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">'drop'</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">'jpg|png|svg'</span><span style="color: #f8f8f2">,</span> <span style="color: #75715e">// pipe separated file types</span>
<span style="color: #e6db74">'dataURL'</span><span style="color: #f8f8f2">,</span> <span style="color: #75715e">// read as dataURL, binary, array, (default) -> 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"></script></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>
|
Download
