How to send image and data using ajax

Question

I want to change profile information. There are 4 input fields and 2 types of input file.

can this problem only be solved with javascript without jquery?

I can not pass the value of the input field and the type of the input file using Ajax, so far my code always returns

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 my mistake is in formData.append();

And can someone explain about the files [0]. I can not find it on 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 at 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'];

Answer 1

Try the following:

Here I gave one example. Please take the correct code and use it in the 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>

.

Answer 2

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