MY CODE >> Drag and Drop Files
<!DOCTYPE HTML>
<!-- Tommy Martin
    October 2013
	
	This webpage uses HTML5 and JavaScript to allow a user to drag and drop files into
	a form.
    -->
    
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
	
</script>
<style type="text/css">
#droptarget {
    background-color: white;
    width: 450px;
    height: 250px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-style: solid;
    border-width: medium;
}

#status {
    padding: 10px;
    color: grey;
}

.highlighted {
    border-color: green;
}

.validtarget {
    border-color: darkgrey;
}

.bg {
    width: 550px;
    background-color: #CCDDDD;
    margin-left:auto;
    margin-right:auto;
    padding: 25px;
}
</style>

<script>
    var droptarget;

    // set the status text in our display
    function setStatus(text) {
        document.getElementById("status").innerHTML = text;
    }

    // handle drag events in the drop target
    function handleDragEnter(evt) {

        // if the browser supports accessing the file
        // list during drag, we display the file count
        var files = evt.dataTransfer.files;

        if (files)
            setStatus("There are " + evt.dataTransfer.files.length +
                " files in this drag.");
        else
            setStatus("There are unknown items in this drag.");

        droptarget.className = "highlighted";

        evt.stopPropagation();
        evt.preventDefault();

        return false;
    }

    // preventing the default dragover behavior
    // is necessary for successful drops
    function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();

        return false;
    }

    // reset the text and status when drags leave
    function handleDragLeave(evt) {
        setStatus("Drag files into this area.");

        droptarget.className = "validtarget";

        return false;
    }

    // handle the drop of files
    function handleDrop(evt) {
        // cancel the event to prevent viewing the file
        evt.preventDefault();
        evt.stopPropagation();

        var filelist = evt.dataTransfer.files;

        var message = "There were " + filelist.length + " files dropped.";

        // show a detail list for each file in the drag
        message += "<ol>";

        [].forEach.call(filelist, function(file) {
            message += "<li>";
            message += "<strong>" + file.name + "</strong> ";
            message += "size: " + file.size + " bytes";
            message += "</li>";
        });

        message += "</ol>";

        setStatus(message);
        droptarget.className = "validtarget";

        return false;
    }

    function loadDemo() {

        droptarget = document.getElementById("droptarget");
        droptarget.className = "validtarget";

        droptarget.addEventListener("dragenter", handleDragEnter, false);
        droptarget.addEventListener("dragover", handleDragOver, false);
        droptarget.addEventListener("dragleave", handleDragLeave, false);
        droptarget.addEventListener("drop", handleDrop, false);

        setStatus("Drag files into this area.");
    }

    window.addEventListener("load", loadDemo, false);
	
	function submitButton() {
          alert("Thanks for you comment.\nWe appreciate the feedback!");
    }

</script>

</head>
<body>
    <svg width ="100%" height="100">
        <text x=50% y=75
            font-family="impact"
            font-size="60px"
            fill="996600"
            text-anchor="middle">
        Smart Homes
        </text>
    </svg>
	
    <div align="center">
        <h3>Product Comments</h3>
    </div>
	
    <div align="center" class="bg">
        <form>
        <textarea name="comments" 
                  maxlength="140" 
                  placeholder="Leave comments here." 
                  cols="60" 
                  rows="5"
                  spellcheck="true"></textarea>
		
            <br>
            <br>
		
            Feel free to leave us an image too!<br>
            Drag and drop images into the box below.<br>
			
            <!-- Drag and Drop Box -->
            <div id="droptarget">
                <div id="status"></div>
            </div>
		
            <br>
		
            <p><button onclick="submitButton()">Submit Comment</button></p>
	
        </form>
	
    </div>
	
</body>
</html>