demo-jquery.htm

﻿<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="/adorn/adorn.css"/>
    <script src="/adorn/adorn.js"></script>
    <title>Drop Files into Browser</title>
    <style type="text/css">
    #silverlightControlHost {
	    height: 100%;
	    text-align:center;
    }
    #holder{
        border:1px solid lightgray;
        height:100px;
        font-size:20px;
        color:gray;
        text-align:center;
        padding:20px;
    }
	    #holder ul{
	    	width:100%;
	    	text-align:left;
	    }
		    #holder li img{
		    	height:20px;
		    }
	    
    </style>
    
</head>
<body>

    <h1>Drag and drop file demo with jQuery Event binding</h1>
    <div id="holder">
        Drop files from desktop here
    </div>

<h2>Source</h2>

<p>Include jQuery and shim</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" class="pre"></script>
<script src="dropfile.js" class="pre"></script>

<p>Add DOM created event to add events and cancel some defaults</p>
<script class="pre">
$(document).ready(function () {
    /**
    * Add drop functionality to our holder,
    * This is standard HTML5 File API
    */
	var ignoreDrag = function(e) {
		var event = typeof e.originalEvent != 'undefined' ? e.originalEvent : e;
		if (event.stopPropagation) {
			event.stopPropagation();
		}
		if (event.preventDefault) {
			event.preventDefault();
		}
	};

	$("#holder").bind('dragover', ignoreDrag).bind('dragenter', ignoreDrag).bind('drop', function(e){
		var holder= this;
		e = (e&&e.originalEvent?e.originalEvent:window.event) || e;

		ignoreDrag(e);

		var files = (e.files||e.dataTransfer.files);

		var s = "";
		for (var i = 0; i < files.length; i++) {
			(function(i){
				var reader = new FileReader();
			    reader.onload = function (event) {
			        holder.innerHTML = "<li><img src='"+ event.target.result +"' /> "+(files[i].name)+"</li>" + holder.innerHTML;
			    };
			    reader.readAsDataURL(files[i]);
			})(i);
		}
		
		return false;
	});
});
</script>
</body>
</html>