使用 ajax 和 php 从多个表单上传图像

Question

in PHP page with multiple form tag to register user information. using ajax to collect data and post to register PHP page now i want to upload image to server folder but i failed.

my html code:

<label for="upimage" class="btn btn-sm btn-primary mb-75 mr-75">Upload Image</label>
<input type="file" id="upimage" hidden accept="image/*" name="image"/>

Javascript Code:

let data1 = document.getElementById('data1').value,
    data2 = document.getElementById('data1').value,
    data3 = document.getElementById('data1').value,
    upimage = document.getElementById('upimage').value;
$.ajax({
    url:"././newregister.php",
    method:"POST",
    data:{action:'newregister', data1:data1, data2:data2,
        data3:data3, upimage:upimage},
    success:function(data){
        alert(data);
    }
});

newregister php code:

$uploads_dir = './uploads';
if ($_FILES["file"]["error"] == UPLOAD_ERR_OK) {
    $tmp_name = $_FILES["file"]["tmp_name"];
    $name = $_FILES["file"]["name"];
    move_uploaded_file($tmp_name, "$uploads_dir/$name");
    echo "Sucsess"; 
}
else
{
    echo "Error" . $_FILES["file"]["error"] ; 
}

ERR: Undefined index: file in.... on line....

Answer 1

Given by POST method uploads

Be sure your file upload form has attribute enctype="multipart/form-data" otherwise the file upload will not work.

Your current solution lacks enctype, that's why your file is not getting uploaded to the server and therefore isn't in the superglobal variable $_FILES.

---

As ferikeem already said. Wrap your data in a FormData Object and send it that way. See: https://stackoverflow.com/a/5976031/10887013

JavaScript

let fd = new FormData();
fd.append("you_file_key_here", $("#upimage")[0].files[0]);
fd.append("data1", $("#data1")[0].value);
fd.append("data2", $("#data2")[0].value);
fd.append("data3", $("#data3")[0].value);

$.ajax({
    url: "././newregister.php",
    method: "POST",
    data: fd,
    processData: false,
    contentType: false,
    success: function(data){
        alert(data);
    }
});

Answer 2

$_FILES["file"] , here is your problem.

In $_FILES array key "file" doesn't exists. As I see you need to change $_FILES["file"] with $_FILES["upimage"] .