new demo: dnd + filereader + xhr2
This commit is contained in:
parent
73693f562f
commit
5fc6ff12c7
10
demos.json
10
demos.json
|
@ -1,4 +1,14 @@
|
||||||
[
|
[
|
||||||
|
{
|
||||||
|
"desc": "Drag and drop and XHR upload",
|
||||||
|
"url": "dnd-upload",
|
||||||
|
"tags": "file dnd xhr2",
|
||||||
|
"support": {
|
||||||
|
"live": "chrome firefox",
|
||||||
|
"nightly": "ie"
|
||||||
|
},
|
||||||
|
"test": "typeof FileReader != 'undefined' && 'draggable' in document.createElement('span') && !!window.FormData && 'upload' in new XMLHttpRequest"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"desc": "Simple class manipulation",
|
"desc": "Simple class manipulation",
|
||||||
"url": "classlist",
|
"url": "classlist",
|
||||||
|
|
|
@ -0,0 +1,110 @@
|
||||||
|
<title>Drag and drop, automatic upload</title>
|
||||||
|
<style>
|
||||||
|
#holder { border: 10px dashed #ccc; width: 300px; min-height: 300px; margin: 20px auto;}
|
||||||
|
#holder.hover { border: 10px dashed #0c0; }
|
||||||
|
#holder img { display: block; margin: 10px auto; }
|
||||||
|
#holder p { margin: 10px; font-size: 14px; }
|
||||||
|
meter { width: 100%; }
|
||||||
|
meter:after { content: '%'; }
|
||||||
|
</style>
|
||||||
|
<article>
|
||||||
|
<div id="holder">
|
||||||
|
</div>
|
||||||
|
<p id="upload" hidden><label>Drag & drop not supported, but you can still upload via this input field:<br><input type="file"></label></p>
|
||||||
|
<p id="filereader">File API & FileReader API not supported</p>
|
||||||
|
<p id="formdata">XHR2's FormData is not supported</p>
|
||||||
|
<p id="progress">XHR2's upload progress isn't supported</p>
|
||||||
|
<p>Upload progress: <meter id="uploadprogress" min="0" max="100" value="0">0</meter></p>
|
||||||
|
<p>Drag an image from your desktop on to the drop zone above to see the browser both render the preview, but also upload automatically to this server.</p>
|
||||||
|
</article>
|
||||||
|
<script>
|
||||||
|
var holder = document.getElementById('holder'),
|
||||||
|
tests = {
|
||||||
|
filereader: typeof FileReader != 'undefined',
|
||||||
|
dnd: 'draggable' in document.createElement('span'),
|
||||||
|
formdata: !!window.FormData,
|
||||||
|
progress: "upload" in new XMLHttpRequest
|
||||||
|
},
|
||||||
|
support = {
|
||||||
|
filereader: document.getElementById('filereader'),
|
||||||
|
formdata: document.getElementById('formdata'),
|
||||||
|
progress: document.getElementById('progress')
|
||||||
|
},
|
||||||
|
acceptedTypes = {
|
||||||
|
'image/png': true,
|
||||||
|
'image/jpeg': true,
|
||||||
|
'image/gif': true
|
||||||
|
},
|
||||||
|
progress = document.getElementById('uploadprogress'),
|
||||||
|
fileupload = document.getElementById('upload');
|
||||||
|
|
||||||
|
"filereader formdata progress".split(' ').forEach(function (api) {
|
||||||
|
if (tests[api] === false) {
|
||||||
|
support[api].className = 'fail';
|
||||||
|
} else {
|
||||||
|
support[api].hidden = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function previewfile(file) {
|
||||||
|
if (tests.filereader === true && acceptedTypes[file.type] === true) {
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onload = function (event) {
|
||||||
|
var image = new Image();
|
||||||
|
image.src = event.target.result;
|
||||||
|
image.width = 250; // a fake resize
|
||||||
|
holder.appendChild(image);
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
} else {
|
||||||
|
holder.innerHTML += '<p>Uploaded ' + file.name + ' ' + (file.fileSize ? (file.fileSize/1024|0) + 'K' : '');
|
||||||
|
console.log(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function readfiles(files) {
|
||||||
|
debugger;
|
||||||
|
var formData = tests.formdata ? new FormData() : null;
|
||||||
|
for (var i = 0; i < files.length; i++) {
|
||||||
|
if (tests.formdata) formData.append('file', files[i]);
|
||||||
|
previewfile(files[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// now post a new XHR request
|
||||||
|
if (tests.formdata) {
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('POST', '/devnull.php');
|
||||||
|
xhr.onload = function() {
|
||||||
|
progress.value = progress.innerHTML = 100;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (tests.progress) {
|
||||||
|
xhr.upload.onprogress = function (event) {
|
||||||
|
if (event.lengthComputable) {
|
||||||
|
var complete = (event.loaded / event.total * 100 | 0);
|
||||||
|
progress.value = progress.innerHTML = complete;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
xhr.send(formData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (tests.dnd) {
|
||||||
|
holder.ondragover = function () { this.className = 'hover'; return false; };
|
||||||
|
holder.ondragend = function () { this.className = ''; return false; };
|
||||||
|
holder.ondrop = function (e) {
|
||||||
|
this.className = '';
|
||||||
|
e.preventDefault();
|
||||||
|
readfiles(e.dataTransfer.files);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
fileupload.hidden = false;
|
||||||
|
fileupload.querySelector('input').onchange = function () {
|
||||||
|
readfiles(this.files);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
|
@ -28,10 +28,12 @@ holder.ondrop = function (e) {
|
||||||
var file = e.dataTransfer.files[0],
|
var file = e.dataTransfer.files[0],
|
||||||
reader = new FileReader();
|
reader = new FileReader();
|
||||||
reader.onload = function (event) {
|
reader.onload = function (event) {
|
||||||
|
console.log(event.target);
|
||||||
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
|
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
|
||||||
};
|
};
|
||||||
|
console.log(file);
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
<?php
|
||||||
|
var_dump($_FILES)
|
||||||
|
?>
|
Loading…
Reference in New Issue