<div class="row img-holder" onclick="new fileReader().Init('jpg|png|svg', 'dataURL', pickImage, true)"></div> <script> 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]); } </script>
<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>
// Usage: new fileReader().Init( 'php|html|css|txt', //pipe selected file types 'text', // read file as: dataURL or binary or array or text function (e){}, // callBack function return {data: e.target.result, name: theFile.name, size: theFile.size} true // multiple file select true or false );
<script type="text/javascript"> //HTML5 fileReader v.1.0.0 //Author: Tóth András //Licence: MIT //url: http://atandrastoth.co.uk 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); break; 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); } } }; </script>
![]() JavaScript HTML5 FileReader By Andras Toth ![]() March 2015 Number 2 Prize: One downloadable e-book of choice by O'Reilly |