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",
|
"url": "dataset",
|
||||||
"tags": "dataset",
|
"tags": "dataset",
|
||||||
"support": {
|
"support": {
|
||||||
"live": "chrome",
|
"live": "chrome opera",
|
||||||
"nightly": "safari"
|
"nightly": "safari"
|
||||||
},
|
},
|
||||||
"test": "'dataset' in document.createElement('i')"
|
"test": "'dataset' in document.createElement('i')"
|
||||||
|
@ -20,6 +20,16 @@
|
||||||
},
|
},
|
||||||
"test": "Modernizr.history"
|
"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",
|
"desc": "Drag files directly into your browser",
|
||||||
"url": "file-api",
|
"url": "file-api",
|
||||||
|
@ -28,7 +38,7 @@
|
||||||
"support": {
|
"support": {
|
||||||
"live": "firefox chrome"
|
"live": "firefox chrome"
|
||||||
},
|
},
|
||||||
"test": "typeof FileReader != 'undefined'"
|
"test": "typeof FileReader != 'undefined' && Modernizr.draganddrop"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"desc": "Simple chat client",
|
"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