javascript - How to send image and data using ajax -

i want change profile information. there 4 input box , 2 input file type.

could problem solved javascript without jquery?

i can't passing input box value , input file type image using ajax, until code return

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 

i think mistake in formdata.append();

and explain .files[0]. can't find in google.

html

<input type="text" maxlength="20" id="fullname-box" name="full_name" onkeyup="disablesubmit()"> <input type="text" maxlength="20" id="screenname-box" name="screen_name" onkeyup="disablesubmit()"> <input type="text" id="targetname-box" name="target_name"> <textarea maxlength="50" id="desc-box" name="description" ></textarea> <input id="imginput" type="file" class="upload" accept="image/*" name="profile_img"/> <input id="imginputbg" type="file" class="upload" accept="image/*" name="bg_img"/> 

script ajax

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 && http.status==200){                     document.getelementbyid("info").innerhtml = http.responsetext;                 }             }             http.send(formdata);         } 

profile-update.php start line 6

$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']; 

try this:

i have given 1 example here. please take proper code there , use in script.

<script type="text/javascript">      $(document).ready(function() {          $("form#frm1").submit(function() {             var formdata = new formdata($(this)[0]);              $.ajax({                 url: 'posturl.php',                 type: 'post',                 data: formdata,                 async: false,                 success: function(data) {                     alert(data);                 },                 cache: false,                 contenttype: false,                 processdata: false             });              return false;         });      }); </script>  <form name="frm1" id="frm1" action="number.php" method="post" enctype="multipart/form-data">     <input type="text" name="pname" id="pname" placeholder="person name"  />     <br />     <br />     <input type="file" name="pfile" id="pfile"  />     <br />     <input type="submit" value="send" name="btnadd" id="btnadd" style="margin-top: 25px" /> </form> 

also, use own forms , fields here.