Как отправить файл (из File API) из перетаскивания

Question

У меня есть страница загрузки файла, где файл выбирается путем перетаскивания. Поскольку файл добавлен (а не с использованием традиционного поля), я получил доступ к файлу через API файлов javascript.

Я читал эту статью от Mozilla , но меня не все заинтересовали в асинхронной загрузке (поскольку у меня есть некоторые другие данные, которые необходимо отправить вместе с файлом, но все ресурсы Мне удалось найти, делают ли это с XHR.

Вот что мне удалось собрать воедино:

function handleFileSelect(evt) {
    evt.toElement.className = "";
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, file; file = files[i]; i++) {
        var f = file;

        var reader = new FileReader();
        reader.onload = function(e) {
          var bin = e.target.result;
          // bin is the binaryString
        };
        reader.readAsBinaryString(file);

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "{% url micro-upload %}");
        xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
        xhr.sendAsBinary(bin);

        output.push('<li><strong>Uploaded:</strong><em>', escape(f.name), '</em> (', f.type || 'n/a', ') - ',
                    f.size, ' bytes, last modified: ',
                    f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                    '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

Однако на стороне сервера Django это не нравится. Он жалуется на искаженные данные POST.

В идеале, мое решение, я думаю, будет следующим:

1. Пользователь перетаскивает файл на страницу
2. Файл добавлен в скрытый файл <input>
3. Файл размещен вместе с остальными данными формы.

Мне известно, что большинство браузеров позволяют перетаскивать файлы в файл <input>, но я хочу иметь большую цель перетаскивания с пользовательским стилем.

Answer 1

xhr.sendAsBinary() не стандартно.Вы думали об использовании FormData?Это позволит вам присоединить файл (и другие свойства) к многочастному запросу mime ... по сути, что делает form.post ().Смотрите мой ответ здесь для кода, как это сделать.