diff --git a/index.html b/index.html index 86760e6..55b6cf6 100644 --- a/index.html +++ b/index.html @@ -203,12 +203,39 @@
- There is no jQuery or any other library dependancy for FileReader.js. It will work with a simple call to + There is no jQuery or any other library dependancy for FileReader.js. + +
<script type='text/javascript' src='filereader.js'></script>+
+ You don't need any other libraries. It can be called after adding the script with: +
++// Accept files from the specified input[type=file] +FileReaderJS.setupInput(document.getElementById('file-input'), options); + +// Accept dropped files on the specified file +FileReaderJS.setupDrop(document.getElementById('dropzone'), options); + +// Accept paste events if available +FileReaderJS.setupClipboard(document.body, options); + +// Attempt to use FileReaderSync in a worker if available. +FileReaderJS.setSync(true/false); ++
+ If you use jQuery, you could use it as such: +
++$("#file-input, #dropzone").fileReaderJS(opts); +$("body").fileClipboard(opts); ++
-var opts = { +var options = { // CSS Class to add to the drop element when a drag is active dragClass: "drag", @@ -252,26 +279,23 @@+Usage
} };
+ Ready to get started? Here is a sample that reads all files dropped on the body as data URLs. You can also check out this sample on jsfiddle. +
-// Accept files from the specified input[type=file] -FileReaderJS.setupInput(document.getElementById('file-input'), opts); - -// Accept dropped files on the specified file -FileReaderJS.setupDrop(document.getElementById('dropzone'), opts); - -// Accept paste events if available -FileReaderJS.setupClipboard(document.body, opts); - -// Attempt to use FileReaderSync in a worker if available. -FileReaderJS.setSync(true/false); -- -
- If you do use jQuery, you could use it as such: -
--$("#file-input, #dropzone").fileReaderJS(opts); -$("body").fileClipboard(opts); +FileReaderJS.setupDrop(document.body, { + readAsDefault: "DataURL", + on: { + load: function(e, file) { + var img = new Image(); + img.onload = function() { + document.body.appendChild(img); + }; + img.src = e.target.result; + } + } +});