title: How to send image and data using ajax
body: <p>I want to change profile information. There are 4 input box and 2 input file type.</p>
  
  <p>could this problem solved with only javascript without jquery?</p>
  
  <p>i can't passing input box value and input file type image using Ajax, until now my code always return</p>
  
  <pre><code>Notice: Undefined index: full_name in C:\xampp\htdocs\hate\php\profile-update.php on line 6
  
  ... until
  
  Notice: Undefined index: bg_img in C:\xampp\htdocs\hate\php\profile-update.php on line 15
  </code></pre>
  
  <p>I think my mistake in <code>formData.append();</code></p>
  
  <p>And could someone explain about .files[0]. I can't find it in Google.</p>
  
  <p>html</p>
  
  <pre><code>&lt;input type="text" maxlength="20" id="fullname-box" name="full_name" onkeyup="disableSubmit()"&gt;
  &lt;input type="text" maxlength="20" id="screenname-box" name="screen_name" onkeyup="disableSubmit()"&gt;
  &lt;input type="text" id="targetname-box" name="target_name"&gt;
  &lt;textarea maxlength="50" id="desc-box" name="description" &gt;&lt;/textarea&gt;
  &lt;input id="imgInput" type="file" class="upload" accept="image/*" name="profile_img"/&gt;
  &lt;input id="imgInputBg" type="file" class="upload" accept="image/*" name="bg_img"/&gt;
  </code></pre>
  
  <p>script ajax</p>
  
  <pre><code>function change_profile(){
              var http = new XMLHttpRequest();
  
              var fullname = document.getElementById("fullname-box").value;
              var screenname = document.getElementById("screenname-box").value;
              var targetname = document.getElementById("targetname-box").value;
              var desc = document.getElementById("desc-box").value;
  
              var profile = document.getElementById("imgInput");
              if(profile.value == ""){
                  var profile_img = profile.files[0];
              }
              var bg = document.getElementById('imgInputBg');
              if(bg.value == ""){
                  var bg_img = bg.files[1];
              }
  
              var formData = new FormData();
              formData.append("full_name", fullname);
              formData.append("screen_name", screenname);
              formData.append("target_name", targetname);
              formData.append("description", desc);
              formData.append("profile_img", profile_img);
              formData.append("bg_img", bg_img);
  
              var url = "profile-update.php";
              http.open("POST",url,true);
              http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  
              http.onreadystatechange = function(){
                  if (http.readyState==4 &amp;&amp; http.status==200){
                      document.getElementById("info").innerHTML = http.responseText;
                  }
              }
              http.send(formData);
          }
  </code></pre>
  
  <p>profile-update.php start from line 6</p>
  
  <pre><code>$full_name = $_POST['full_name'];
  $screen_name = htmlspecialchars(mysqli_real_escape_string($conn,$_POST['screen_name']));
  $target_name = $_POST['target_name'];
  $description = htmlspecialchars(mysqli_real_escape_string($conn,$_POST['description']));
  $profile_img_name = $_FILES['profile_img']['name'];
  $profile_img_size = $_FILES['profile_img']['size'];
  $profile_img_tmp = $_FILES['profile_img']['tmp_name'];
  $bg_img_name = $_FILES['bg_img']['name'];
  $bg_img_size = $_FILES['bg_img']['size'];
  $bg_img_tmp = $_FILES['bg_img']['tmp_name'];
  </code></pre>