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",
|
||||
"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],
|
||||
reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
console.log(event.target);
|
||||
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
|
||||
};
|
||||
console.log(file);
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
return false;
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
<?php
|
||||
var_dump($_FILES)
|
||||
?>
|
Loading…
Reference in New Issue