Проблема с формой отправки файлов drag & drop. Файлы не отправляются

Решил использовать данную реализацию в django проекте, но не могу понять в чем проблема. После отправки формы, в request.FILES ничего нет, это в случае перетаскивания.

Если выбирать файлы обычным способом, то все работает хорошо, и файлы в request.FILES есть. Если перетаскивать, после отправки формы, в запросе файлы отсутствуют.

Код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
.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;
}
    </style>
</head>
<body>
<form id="upload" action="" 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>
<script>
    /* 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>"
    );
}
</script>
</body>
</html>

вы должны установить fileselect[] что ему нужно отправить ,а то вы только файл открываете

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

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

    // парсим все объекты типа File
    var fileselect   = $id("fileselect");

    for (var i = 0, f; f = files[i]; i++){
    ParseFile(f);
    fileselect.value[i] = f;
    }
 
}
Вернуться на верх