Cómo enviar imágenes y datos usando ajax

Quiero cambiar la información del perfil. Hay 4 cuadros de input y 2 types de files de input.

podría resolverse este problema solo con javascript sin jquery?

No puedo pasar el valor del cuadro de input e ingresar la image del tipo de file usando Ajax, hasta ahora mi código siempre regresa

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 

Creo que mi error en formData.append();

Y podría alguien explicar sobre .files [0]. No puedo encontrarlo en 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 comienza desde la línea 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']; 

Prueba esto:

He dado un ejemplo aquí. Por favor, tome el código apropiado desde allí y úselo en su secuencia de commands.

 <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> 

Además, use sus propios formularios y campos aquí.

 $("#yourId").click(function(){ $.ajax({ url: "provideyourUrl.php",// give your url type: "POST", data: formdata, processData: false, contentType: false, success: function (response) { console.log(response); } }); });