Как я могу эмулировать отправку формы с помощью объекта File javascript?

Question

Итак, у меня есть файловый объект, созданный путем перетаскивания в область с рабочего стола. Теперь все в порядке, пока я не загружу его через Ajax в бэкэнд Django. Я хотел бы использовать полезные утилиты Django, такие как request.FILES и т. Д.

Прямо сейчас, я возиться с некоторым существующим кодом здесь:

xhr.open("post", s.post, true);

            // Set appropriate headers
            xhr.setRequestHeader("content-type", "multipart/form-data");
            xhr.setRequestHeader("x-file-name", file.fileName);
            xhr.setRequestHeader("x-file-size", file.fileSize);
            xhr.setRequestHeader("x-file-type", file.
            xhr.send(file);

Как ни старайся, похоже, это не эмуляция формы с отправкой файла. Есть что-то, чего мне не хватает?

Спасибо!

Answer 1

К сожалению, вы не можете загрузить файл, используя объект XmlHttpRequest, потому что он не поддерживается.

Были хитрые обходные пути (например, использование iFrame), и недавно появился новый файл API (https://developer.mozilla.org/en/using_files_from_web_applications)HTML 5 для браузеров, которые его поддерживают.

Если вы ищете немного больше о стековом потоке, вы можете найти примеры того, как делать обходные пути.

Answer 2

Вам необходимо создать объект «FormData», а затем добавить к нему файл в качестве параметра.

    var fd = new FormData();
    fd.append("theFile", yourFileObject);
    //
    // ... set up the xhr ...
    //
    xhr.send(fd);

Очевидно, что это работает только в средах HTML5, но если вы возитесь с материалом Fileэто, вероятно, то, с чем вы имеете дело.