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

Question

Отправка формы содержание через звонок 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) возвращает TRUE, но if($_FILES) возвращает FALSE (когда и имя, и поле файла содержат что-то). Когда я 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 работает отлично, но первый метод flops?

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

Answer 1

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

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

Sidenote: Я не могу настроить demo yet, 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 для текстовых входов.