JavaScript — только JQuery работает с FormData?

Question

JavaScript — только JQuery работает с FormData?

Я отправляю содержимое формы через вызов AJAX.

Форма является:

<form id="id_of_form" enctype="multipart/form-data">
<input type="text" name="name" id="name" />
<input type="file" name="fileField" id="fileField" />
<br/><br/>
<input class="button" type="submit" value="Upload"/>
</form>

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

Способ 1

<script type="text/javascript">

$(document).ready(function(){
$('#id_of_form').on('submit',function(e){
e.preventDefault();

var formdata = new FormData($(this)[0]);

var ajax = new XMLHttpRequest();
ajax.open("POST", "testing.php", true);

ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
var returnVal = ajax.responseText;

... do stuff here ...
}
}
ajax.send(formdata);
});
});

</script>

это Сорта работает. В моем PHP if($_POST) возвращается ПРАВДА, но if($_FILES) возвращается ЛОЖНЫЙ (когда и имя, и поле файла содержат что-то). Когда я делаю var_dump($_POST) в моем PHP это выдает следующее:

array(312) { ["------WebKitFormBoundaryoypwTdV9MSCqJC2F Content-Disposition:_form-data;_name"]=> string(5698) ""name" qwert ------WebKitFormBoundaryoypwTdV9MSCqJC2F Content-Disposition: form-data; name="fileField"; filename="carved-coral-beads.jpg" Content-Type: image/jpeg ���� VExifMM* ���=�19(1A2_��s������i ��SA

^ Только аббревиатура — на самом деле намного дольше.

var_dump($_FILES) возвращается

array(0) { }

Способ 1 работает только когда я отправляю данные следующим образом:

ajax.send("username=something&var2=somethingelse");

но я не могу включать файлы (в частности, изображения) таким образом.

Если я использую JQuery для отправки:

Способ 2

<script type="text/javascript">

$(document).ready(function(){
$('#id_of_form').on('submit',function(e){
e.preventDefault();

var formdata = new FormData($(this)[0]);

$.ajax({
url: "testing.php",
type: "POST",
data: formdata,
contentType: false,
cache: false,
processData:false,
success: function(data){
... do stuff here ...
}
});
});

</script>

это работает просто отлично, и я могу разобрать содержимое и файл в моем PHP.

Просто по привычке, я хотел бы использовать Способ 1. Почему будет Способ 2 с версией JQuery работает просто отлично, но первый метод проваливается?

Заранее спасибо.

2

ajax form-data javascript jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Да, это также будет работать нормально, указанная вами строка не работает, так как у вас есть переменная опечатка в методе № 1:

var formdata = new FormData($(this)[0]);
ajax.send(formData); // formdata != formData

Sidenote: Я пока не могу установить демо, http://codepad.viper-7.com Я думаю, что все еще вниз (по крайней мере, на моем конце). Я настрою это позже, как только смогу получить доступ, но вот что я бы использовал.

<?php

if($_SERVER['REQUEST_METHOD'] == 'POST') {
print_r($_FILES);
print_r($_POST);
exit;
}

?>

<form id="id_of_form" enctype="multipart/form-data">
<input type="text" name="name" id="name" />
<input type="file" name="fileField" id="fileField" />
<br/><br/>
<input class="button" type="submit" value="Upload"/>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id_of_form').on('submit',function(e){
e.preventDefault();

var formdata = new FormData($(this)[0]);
var name_value = document.getElementById('name').value;
formdata.append('name', name_value);  // append value

var ajax = new XMLHttpRequest();
ajax.open("POST", document.URL, true);ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
var returnVal = ajax.responseText;
console.log(returnVal);
}
}
ajax.send(formdata);
});
});
</script>

Важное примечание: ручка $_FILES для вашего загруженного файла и дескриптора $_POST для вашего ввода текста.

2