Passing form data and file to php using ajax

Question

This might have been asked before, but i have search on here and on google and every answer I have read doesnt work.

The question I have to solve is make a form with first name, last name, email and a image. Then pass the data into a database and upload the file also to a database. Currently my code doesnt do anything after I press submit. Before I added the file box it would insert the data into my database.

HTML

<form id="myForm" method ="post" enctype="multipart/form-data">
    First Name: <input type="text" name="fname" id="fname"> <br>
    Last Name: <input type="text" name="lname" id="lname"> <br>
    Email:  <input type="text" name="email" id="email"> <br>
    Image: <input type="file" name="image" id="image"> <br>
    <button type="button" name="btnSubmit" id="btnSubmit"> Submit </button>
</form>

AJAX/JS

$("#btnSubmit").click(function(){
     var formData = new FormData($(this)[0]);
     $.ajax({
        type: 'POST',
        url: 'form2.php',
        data: formData,
         success: function (data) {
           alert(data)
         },
      });
  });

PHP

$upload = basename($_FILES['image']['name']);
$type = substr($upload, strrpos($upload, '.') + 1);
$size = $_FILES['image']['size']/1024; 

if ($_FILES["image"]["error"] > 0)
{
    echo "Error: " . $_FILES["image"]["error"] . "<br>";
}
else
{
    echo "Upload: " . $upload . "<br>";
    echo "Type: " . $type . "<br>";
    echo "Size: " . $size . " kB<br>";
}

$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
echo "You Entered <br />";
echo "<b>First Name:</b> ". $fname . "<br />";
echo "<b>Last Name:</b> ". $lname . "<br />";
echo "<b>Email:</b> ". $email . "<br />";

http://stackoverflow.com/questions/9622901/how-to-upload-a-file-using-jquery-ajax-and-formdata — adeneo, Nov 01 '13 at 22:18
Welcome to [so]. When asking questions, it helps to explain what you mean specifically. For example, don't just say something _"doesn't work"_. What does this tell? How does it help to fix the problem? Also it's a good idea to explain why you're doing something, as someone might be able to tell you if you're going about something the wrong way, but might be acceptable if it was for something else. For more information, see [ask]. Thank you! — Qantas 94 Heavy, Nov 01 '13 at 22:46
Alex , I'm just improved your code and fixed the js issues , you can pull the code from this link https://github.com/AstmDesign/phpAjaxUploader — Astm, May 03 '16 at 15:07
why you people always Mark as duplicate questions. this is not duplicate question. vote up — Asesha George, Sep 01 '16 at 12:59

score 1 · Answer 1 · answered Nov 01 '13 at 22:20

1

Forms by default submit to wherever they're told. In order to stop this, you need to prevent it. Your js should look something like this:

$("form#data").submit(function(event){
    event.preventDefault();
    ...
});

answered Nov 01 '13 at 22:20

Rich Hatch

86
1
7

Aditya Vikas Devarapalli · Answer 2 · 2013-11-01T23:13:47.060

1

change the submit type button to button type and then use AJAX like this:

<button type="button" name="btnSubmit" id="btnSubmit"> Submit </button>

you need to change the jQuery Code to :

$("#btnSubmit").click(function(){
     var formData = new FormData($("#myForm"));
     $.ajax({
        type: 'POST',
        url: 'form2.php',
        data: formData,
         success: function (data) {
           alert(data)
         },
      });
  });

and also change the code here if ($_FILES["file"]["error"] > 0) to if ($_FILES["image"]["error"] > 0)

edited Nov 01 '13 at 23:13

answered Nov 01 '13 at 22:38

Aditya Vikas Devarapalli

3,186
2
36
54

I added that and changed my jquery, but still no dice in storing to my database, also shouldnt the alert pop up also? – Alex Clark Nov 01 '13 at 22:49
are you connecting to your database properly ? and what's the code you are using to store the data into db ? – Aditya Vikas Devarapalli Nov 01 '13 at 22:53
I am connecting properly, I have not changed the connection code since I added the file box. Before I had the form data adding to my data base or just the file but can't get both. I have a feeling my ajax isnt going to my php file. – Alex Clark Nov 01 '13 at 23:07
check out again. i have changed the ajax code – Aditya Vikas Devarapalli Nov 01 '13 at 23:14
I tried it, still nothing. THe network tab only shows my form with a GET method, there is no action when i press submit>? – Alex Clark Nov 01 '13 at 23:17

score 0 · Answer 3 · answered Nov 01 '13 at 22:29

0

This line

if ($_FILES["file"]["error"] > 0)

Should be

 if ($_FILES["image"]["error"] > 0)

answered Nov 01 '13 at 22:29

Gavin

2,123
1
15
19

what does your browsers console show as a response? – Gavin Nov 01 '13 at 22:42
nothing it doesnt show any response on the console – Alex Clark Nov 01 '13 at 23:14

Passing form data and file to php using ajax

3 Answers3

Linked