upload image from multiple form with ajax and 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 ....

i know but to manage my data in register php file i need to send it by data. — STATICMAN
– STATICMAN, Commented May 26, 2021 at 11:19
Do you know how convert this type of data to FormData by append or otherway? — STATICMAN
– STATICMAN, Commented May 26, 2021 at 11:21
You create a FormData object (new FormData()), then append the values to it. Another way may be to set up a form in html, with type (method?) multipart/formdata, and post that with a submit button/function. — ferikeem
– ferikeem, Commented May 26, 2021 at 11:25

Michael · Accepted Answer · 2021-05-26 13:01:53Z

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);
    }
});

edited May 26, 2021 at 13:01

answered May 26, 2021 at 11:49

Michael

514 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Obsidian · Accepted Answer · 2021-05-26 12:03:43Z

0

$_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"].

edited May 26, 2021 at 12:03

Obsidian

3,9308 gold badges20 silver badges33 bronze badges

answered May 26, 2021 at 11:41

krusu

11 bronze badge

1 Comment

STATICMAN Over a year ago

No I write this codes for sample and that's not working with $_FILES["upimage"] too.

Collectives™ on Stack Overflow

upload image from multiple form with ajax and php

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related