Skip to content

Instantly share code, notes, and snippets.

@igorbenic

igorbenic/index.html

Created October 5, 2015 08:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save igorbenic/f06eca1e54643db62b97 to your computer and use it in GitHub Desktop.
Save igorbenic/f06eca1e54643db62b97 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 File API demo
Raw
index.html
<!doctype HTML5>
<html>
<head>
<title>Demo</title>
<script>
//Skripta ide ovdje
</script>
<style>
/*CSS ide ovdje*/
</style>
</head>
<body>
<div id="polje">
<p>Povuci datoteke i pusti ih u ovo polje...</p>
</div>
<table id="fileInfo"></table>
</body>
</html>
Raw
main.js
$(document).ready(function () {
jQuery.event.props.push('dataTransfer');
$('#polje').on('dragenter', preventDefault);
$('#polje').on('dragover', preventDefault);
$('#polje').on('drop', dropItem);
});
function preventDefault(e) {
e.preventDefault();
}
function dropItem(e) {
var files = e.dataTransfer.files
, $table = $('#fileInfo')
, i = 0;
$table.html(
'<thead><tr><th>Name</th><th>Type</th><th>Size</th></tr></thead>');
for (i = 0; i < files.length; i++) {
$('<tr><td>'
+ files[i].name + '</td><td>'
+ files[i].type + '</td><td>'
+ files[i].size + '</td></tr>').appendTo($table);
}
preventDefault(e);
}
Raw
style.css
#polje {
border: solid;
height: 150px;
width: 500px;
background-color: orange;
text-align: center;
}
#fileInfo {
width: 500px;
}
table, th, td {
border-collapse: collapse;
border: 1px solid black;
}
th, td {
padding: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment