Added simple file api example
This commit is contained in:
parent
3ba5802540
commit
b8f88cdf69
14
demos.json
14
demos.json
|
@ -4,7 +4,7 @@
|
|||
"url": "dataset",
|
||||
"tags": "dataset",
|
||||
"support": {
|
||||
"live": "chrome",
|
||||
"live": "chrome opera",
|
||||
"nightly": "safari"
|
||||
},
|
||||
"test": "'dataset' in document.createElement('i')"
|
||||
|
@ -20,6 +20,16 @@
|
|||
},
|
||||
"test": "Modernizr.history"
|
||||
},
|
||||
{
|
||||
"desc": "Browser based file reading",
|
||||
"url": "file-api-simple",
|
||||
"note": "Not part of HTML5",
|
||||
"tags": "file-api",
|
||||
"support": {
|
||||
"live": "firefox chrome opera"
|
||||
},
|
||||
"test": "typeof FileReader != 'undefined'"
|
||||
},
|
||||
{
|
||||
"desc": "Drag files directly into your browser",
|
||||
"url": "file-api",
|
||||
|
@ -28,7 +38,7 @@
|
|||
"support": {
|
||||
"live": "firefox chrome"
|
||||
},
|
||||
"test": "typeof FileReader != 'undefined'"
|
||||
"test": "typeof FileReader != 'undefined' && Modernizr.draganddrop"
|
||||
},
|
||||
{
|
||||
"desc": "Simple chat client",
|
||||
|
|
|
@ -0,0 +1,39 @@
|
|||
<title>File API (simple)</title>
|
||||
<article>
|
||||
<p id="status">File API & FileReader API not supported</p>
|
||||
<p><input type=file></p>
|
||||
<p>Select an image from your machine to read the contents of the file without using a server</p>
|
||||
<div id="holder"></div>
|
||||
</article>
|
||||
<script>
|
||||
var upload = document.getElementsByTagName('input')[0],
|
||||
holder = document.getElementById('holder'),
|
||||
state = document.getElementById('status');
|
||||
|
||||
if (typeof window.FileReader === 'undefined') {
|
||||
state.className = 'fail';
|
||||
} else {
|
||||
state.className = 'success';
|
||||
state.innerHTML = 'File API & FileReader available';
|
||||
}
|
||||
|
||||
upload.onchange = function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var file = upload.files[0],
|
||||
reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
var img = new Image();
|
||||
img.src = event.target.result;
|
||||
// note: no onload required since we've got the dataurl...I think! :)
|
||||
if (img.width > 560) { // holder width
|
||||
img.width = 560;
|
||||
}
|
||||
holder.innerHTML = '';
|
||||
holder.appendChild(img);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
return false;
|
||||
};
|
||||
</script>
|
Loading…
Reference in New Issue