Как создать AJAX-запрос с JavaScript, который содержит как файл, так и данные публикации

Question

Как я могу создать HTTP-запрос, который отправляет один файл и некоторые данные с помощью JavaScript, которые могут быть получены сервером PHP?

Я нашел следующее предложение, но оно не представляется полным

xhr.open("POST", "upload.php");
var boundary = '---------------------------';
boundary += Math.floor(Math.random()*32768);
boundary += Math.floor(Math.random()*32768);
boundary += Math.floor(Math.random()*32768);
xhr.setRequestHeader("Content-Type", 'multipart/form-data; boundary=' + boundary);
var body = '';
body += 'Content-Type: multipart/form-data; boundary=' + boundary;
//body += '\r\nContent-length: '+body.length;
body += '\r\n\r\n--' + boundary + '\r\n' + 'Content-Disposition: form-data; name="';
body += 'myfile"; filename="'+file.fileName+'" \r\n';
body += "Content-Type: "+file.type;
body += '\r\n\r\n';
body += file.getAsBinary();
body += '\r\n'
body += '--' + boundary + '\r\n' + 'Content-Disposition: form-data; name="submitBtn"\r\n\r\nUpload\r\n';
body += '--' + boundary + '--';
xhr.setRequestHeader('Content-length', body.length);

Чтобы это работало, мне нужна переменная 'file', содержащая поле типа входного файла, но куда поместить дополнительные данные поста? Я хочу также отправить текст описания. Предположим, мне также нужно использовать xhr.send для отправки запроса ...

Answer 1

Дополнительные данные POST должны быть размещены как другое Content-Disposition. Пример:

Content-Type: multipart/form-data; boundary=AaB03x

--AaB03x
Content-Disposition: form-data; name="submit-name"

Larry
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain

... contents of file1.txt ...
--AaB03x--

Здесь отправляются две переменные: загружаемый файл и вход с именем = "submit-name" и значением Larry. У вас может быть столько Content-Dispositions, сколько переменных вы бы хотели POST.

Конечно, большая часть сантехники может быть упрощена, если вы используете js-фреймворк, такой как jQuery. Вот отличный плагин , который должен сделать работу .

Answer 2

AFAIK Невозможно отправить файлы с XmlHttpRequest.

Answer 3

Почему бы не использовать jquery ?Это избавит вас от настройки вашего собственного XHR-запроса.