Готовая форма с отправкой файла drag & drop. Поле для передачи файла с помощью перетаскивания его в область

В новой записи, для себя и для вас я решил сохранить код формы которая используется для передачи файла через метод drag and drop, то есть путём перетаскивания файла в область загрузки. В записи представлен полностью готовый вариант данной формы, который вы можете стилизовать под себя.

HTML

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
    <fieldset>
	<legend>HTML Загрузка Файлов</legend>
	<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
	<div>
	    <label for="fileselect">Выберите файлы для загрузки:</label>
	    <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
	    <div id="filedrag" >Или перетащите их сюда</div>
	</div>

        <div id="messages"></div>
	<div id="submitbutton">
	    <button type="submit">Загрузить файлы</button>
	</div>
    </fieldset>
</form>

CSS

.wrapper{
    background: none repeat scroll 0% 0% #FFFFFF;
    margin: 150px auto;
    border: 2px solid #3DA8BA;
    padding: 10px;
    width: 500px;
}
fieldset{
    border:2px solid #efefef;
}
#filedrag{
    border-radius: 7px 7px 7px 7px;
    border: 2px dashed #3DA8BA;
    color: #555555;
    cursor: default;
    display: none;
    margin: 1em 0pt;
    padding: 1em 0pt;
    text-align: center;
    background:#f9f9f9;
}
#filedrag.hover {
    border-style: solid;
    box-shadow: 0pt 3px 4px #dbdbdb inset;
}
#messages{
    margin-top:10px;
    padding:5px;
    font-size:14px;
}
#messages p{
    border-bottom:1px solid #efefef;
    margin-bottom:5px;
}

JavaScript

/* getElementById */
function $id(id) {
    return document.getElementById(id);
}

/* вывод сообщений */
function Output(msg) {
    var m = $id("messages");
    m.innerHTML = msg + m.innerHTML;
}

/* проверка поддержки API */
if (window.File && window.FileList && window.FileReader){
    Init();
}
/* инициализация */
function Init(){
	var fileselect   = $id("fileselect"),
	    filedrag     = $id("filedrag"),
	    submitbutton = $id("submitbutton");

	/* выбор файла */
	fileselect.addEventListener("change", FileSelectHandler, false);

	/* проверка поддержки XHR2 */
	var xhr = new XMLHttpRequest();
	if (xhr.upload){
	    /* сброс файла */
	    filedrag.addEventListener("dragover", FileDragHover, false);
	    filedrag.addEventListener("dragleave", FileDragHover, false);
	    filedrag.addEventListener("drop", FileSelectHandler, false);
	    filedrag.style.display = "block";

	    /* удаление кнопки сабмитта */
	    submitbutton.style.display = "none";
	}
}

// Файл над нужной областью
function FileDragHover(e){
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}

// выбор файла
function FileSelectHandler(e){
    FileDragHover(e);

    // проходимся по объекту FileList 
    var files = e.target.files || e.dataTransfer.files;

    // парсим все объекты типа File
    for (var i = 0, f; f = files[i]; i++){
	ParseFile(f);
    }
}

function ParseFile(file) {
    Output(
	"<p>File information: <strong>" + file.name +
	"</strong> type: <strong>" + file.type +
	"</strong> size: <strong>" + file.size +
	"</strong> bytes</p>"
    );
}