Passing form data and file to php using ajax [duplicate]

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 />";

Welcome to Stack Overflow. 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 How to Ask. Thank you! — Qantas 94 Heavy
– Qantas 94 Heavy, Commented Nov 1, 2013 at 22:46
Alex , I'm just improved your code and fixed the js issues , you can pull the code from this link github.com/AstmDesign/phpAjaxUploader — Astm
– Astm, Commented May 3, 2016 at 15:07
why you people always Mark as duplicate questions. this is not duplicate question. vote up — Asesha
– Asesha, Commented Sep 1, 2016 at 12:59

Rich Hatch · Accepted Answer · 2013-11-01 22:20:51Z

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 1, 2013 at 22:20

Rich Hatch

861 silver badge7 bronze badges

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

Comments

Aditya Vikas Devarapalli · Accepted Answer · 2013-11-01 23:13:47Z

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 1, 2013 at 23:13

answered Nov 1, 2013 at 22:38

Aditya Vikas Devarapalli

3,5792 gold badges42 silver badges60 bronze badges

5 Comments

Alex Clark Over a year ago

I added that and changed my jquery, but still no dice in storing to my database, also shouldnt the alert pop up also?

Aditya Vikas Devarapalli Over a year ago

are you connecting to your database properly ? and what's the code you are using to store the data into db ?

Alex Clark Over a year ago

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.

Aditya Vikas Devarapalli Over a year ago

check out again. i have changed the ajax code

Alex Clark Over a year ago

I tried it, still nothing. THe network tab only shows my form with a GET method, there is no action when i press submit>?

Gavin · Accepted Answer · 2013-11-01 22:29:00Z

0

This line

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

Should be

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

answered Nov 1, 2013 at 22:29

Gavin

2,1531 gold badge15 silver badges22 bronze badges

2 Comments

Gavin Over a year ago

what does your browsers console show as a response?

Alex Clark Over a year ago

nothing it doesnt show any response on the console

Collectives™ on Stack Overflow

Passing form data and file to php using ajax [duplicate]

3 Answers 3

Comments

5 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

2 Comments

Linked

Related