Создание собственной версии ввода [type = file]

Question

У меня есть интересная проблема, которую я пытаюсь решить, и мне было интересно, кто-нибудь из вас может мне помочь.

Я создаю небольшой инструмент, который позволяет пользователям перетаскивать файлы в нашу CMS. Хотя у меня есть часть Drag and Drop, которая работает нормально (используя новые HTML5 API), я застрял с точки зрения того, как должна происходить загрузка файла, тем более что мое ограничение заключается в том, что я не могу изменять какие-либо функции сервера. Я посмотрел на все другие примеры, и все они имеют относительно простые случаи использования, когда они просто отправляют данные файла без необходимости конвертировать все в multipart / form-data и т. Д.

На данный момент сервер имеет простую форму, которая выглядит примерно так:

Name: [ input=text ]
File: [ input=file ]
Caption: [ textarea ]

Когда пользователь нажимает кнопку «Сохранить», выдается POST-вызов типа контента multipart / form-data.

Первоначально я думал, что я мог бы просто заменить текущий элемент управления вводом своим собственным скрытым (используя тот же атрибут «name») и просто иметь закодированные в base64 данные в качестве «значения», однако CMS ожидает «имя файла» чтобы быть переданным через, который обычно заботится входным файлом =. Так, например, последний пост выглядит примерно так:

Content-Disposition: form-data; name="image_0"; filename="assets.jpg" 

Content-Type: image/jpeg

<Some binary image data here>

Я поступаю по этому поводу совершенно неправильно? Должен ли я просто использовать объект XHR вместо этого?

Приветствия

Answer 1

Я разобрался.

Вот что я сделал и мои рекомендации:

• Отправка multipart / formdata с помощью jQuery.ajax
• https://developer.mozilla.org/En/Using_XMLHttpRequest#Using_FormData_objects
• https://developer.mozilla.org/en/DOM/File

Мне пришлось использовать объект FormData (доступный в Firefox 4+, Safari 5+ и Google Chrome) и, конечно, объект FileReader.

Вот реализация (с jQuery):

// The file object needs to come from the "drop" event and is read by the "FileReader" object with the readAsBinaryString() function.
// var file = null;

var data = new FormData();
$("#main_form input:not([type=file])").each(function(){
    data.append($(this).attr("name"), $(this).val());
});
data.append("image_0", file);
$.ajax({
    url: $("#main_form").attr("action"),
    type: "POST",
    data: data,
    processData: false,
    contentType: false
});

На данный момент IE не проблема, но скоро (так как мне нужно перенести это расширение на IE).Есть ли лучший способ сделать это для IE?

Answer 2

Я могу ошибаться, но я полагаю, что AJAX не может загрузить файл.Возможные варианты: плагин, такой как Flash или Java, или нестандартное решение на основе фреймов, где загрузка происходит в отдельном фрейме.Я думаю, что любой элемент управления загрузкой файлов "AJAX", который вы обнаружите там, использует один из этих методов.

Очевидно, что самый простой способ - просто отправить всю форму на сервер, но для меня это 2005 год.*