Drag and Drop- Drag a Single or Multiple Files and Preview them by Dropping
Written by 21 May 2013
May be one of the most important Drag and Drop feature of HTML5 is about files. It breaks the traditional way to send files to the web pages and make it easy just by dragging and dropping of them. This code prepare a box and you can drop a single or multiple files on it. After that you can see a preview of the files content. The text files are printed and the images are shown when their files are dropped. Test it below!
Code Snippet:
<!-- this script is provided by www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<head>
<script>
function allowdrag(e) {
e.stopPropagation()
e.preventDefault()
}
function addobj(e) {
e.stopPropagation()
e.preventDefault()
var files = e.dataTransfer.files;
document.getElementById ("pr").innerHTML= "<span style='font-size: x-large'><strong>Preview:</strong></span><strong><br style='font-size: x-large'>"
for (var i = 0; i<files.length ; i++) {
ParseFile(files[i])
}
dragColor('lightgreen')
}
function ParseFile(file) {
document.getElementById ("pr").innerHTML = document.getElementById ("pr").innerHTML+
"<p>File information: <strong>" + file.name +
"</strong> type: <strong>" + file.type +
"</strong> size: <strong>" + file.size +
"</strong> bytes</p>"
if (file.type.indexOf("text") == 0) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById ("pr").innerHTML = document.getElementById ("pr").innerHTML+
"<p><strong>" + file.name + ":</strong></p><pre>" +
e.target.result.replace(/</g, "<").replace(/>/g, ">") +
"</pre>"
}
reader.readAsText(file)
}
if (file.type.indexOf("image") == 0) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById ("pr").innerHTML = document.getElementById ("pr").innerHTML+
"<p><strong>" + file.name + ":</strong><br />" +
'<img src="' + e.target.result + '" /></p>'
}
reader.readAsDataURL(file)
}
}
function dragColor(clr){
document.getElementById('drop').style.backgroundColor= clr}
</script>
</head>
<div style="border: medium dashed blue; height: 144px; padding: 1px 4px; width: 228px; text-align: center; color: maroon; font-size: 18pt"
id="drop" ondragover="allowdrag(event)" ondrop="addobj(event)" ondragenter="dragColor('lightyellow')" ondragleave="dragColor('white')"
><br>Drag and Drop<br>
<br>any File Here</div>
<br><div id="pr">
<span style="font-size: x-large"><strong>Preview:</strong></span><strong><br style="font-size: x-large">
</strong></div>
<div style="text-align: center"><br><font face="Tahoma"><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
FOTPU
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!