Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Drag and drop client/server -- client HTML
<!DOCTYPE html>
<html xmlns="">
<title>Drop files on me</title>
<style type="text/css">
#dropOnMe {
width: 210px;
height: 136px;
padding: 10px;
border: 2px dashed gray;
background-color: lightgray;
<script src="Scripts/jquery-1.9.1.js"></script>
$(document).ready(function () {
// this function runs when the page loads to set up the drop area
// Check if window.fileReader exists to make sure the browser
// supports file uploads
if (typeof (window.FileReader) == 'undefined') {
alert('Browser does not support HTML5 file uploads!');
dropOnMe.addEventListener("drop", dropHandler, false);
dropOnMe.addEventListener("dragover", function (ev) {
$("#dropOnMe").css("background-color", "lightgoldenrodyellow;");
}, false);
function dropHandler(ev) {
// Prevent default processing.
// Get the file(s) that are dropped.
var filelist = ev.dataTransfer.files;
if (!filelist) return; // if null, exit now
$("#dropOnMe").text(filelist.length +
" file(s) selected for uploading!");
$("#upload").click(function () {
var data = new FormData();
for (var i = 0; i < filelist.length; i++) {
data.append(filelist[i].name, filelist[i]);
type: "POST",
url: "FileHandler.ashx",
contentType: false,
processData: false,
data: data,
success: function (result) {
error: function () {
alert("There was error uploading files!");
dropOnMe.addEventListener("dragend", function (ev) {
$("#dropOnMe").css("background-color", "lightgray;");
$("upload").click(function () { });
}, false);
<h3>Drop Files on Me</h3>
<div id="dropOnMe" draggable="false"></div>
<div id="fileCount" draggable="false"></div>
<input id="upload" draggable="false" type="button"
value="Upload Selected Files" />
<div draggable="false">
<ol draggable="false" id="myFileList"></ol>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment