file is not uploading in ajax php mysql

Question

I am trying to upload a file using ajax which is giving me an error and the rest of data upload successfully i have try without ajax the file is uploading but when i try to upload file via ajax it give me error i am totally confuse why ajax is giving me the problem.here is my code.

<html>
<head>
<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
 var form_data = $('#reg_form').serialize();
$.ajax({
    type:"POST",
    url:"process.php",
    data:form_data,
    success: function(data)
    {
        $("#info").html(data);
    }
});
}); 

});
</script>
</head>

   <body>
        <form id="reg_form" enctype="multipart/form-data" method="post" action="">
               name : <input type="text" name="name" id="name"/>
               </br>
               message : <input type="text" name="message" id="message" />
               </br>
               Image : <input type="file" name="file" id="file" />
               <input type="button" value="Send Comment" id="button">

               <div id="info" />
        </form>
   </body>
</html>

The process.php file coding is here.

<?php
  mysql_connect("localhost","root","");
  mysql_select_db("ajaxdatabase");

  $name=$_POST["name"];
  $message=$_POST["message"];
  //storing file in filename variable
    $fileName = $_FILES['file']['name'];
    //destination dir
    $to="image/".$fileName;

    move_uploaded_file($_FILES['file']['tmp_name'],$to);

  $query=mysql_query("INSERT INTO common(name,message,destination) values('$name','$message','$to') ");

  if($query){
    echo "Your comment has been sent";
  }
  else{
    echo "Error in sending your comment";
  }

?>

You should see the answers in this question : http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery , you'll probably find a solution there — Sylvain, Feb 12 '14 at 16:30
yeah the question is helpful but i have to seek alot of to find my bug any how thanks alot @Sylvain — Vicky, Feb 12 '14 at 16:41
Check the value of `form_data` after `var form_data = $('#reg_form').serialize();`, you should see the problem. — Sylvain, Feb 12 '14 at 16:49
yup the problem is here in serialize so now i will have to make new variables for each input let me try in another way — Vicky, Feb 12 '14 at 16:57
`serialize` is only useful if you are sending textual data. Since you are sending files, you should try to use `FormData`, as described in the accepted answer of the question I've linked a few comments ago. — Sylvain, Feb 12 '14 at 16:58
ok when i assign a new variable to file and alert the variable it show me like this C:/fakepath/filename — Vicky, Feb 12 '14 at 17:00
bro Sylvain still its giving me the issue its not working please help me out — Vicky, Feb 12 '14 at 17:24
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47341/discussion-between-sylvain-and-vicky) — Sylvain, Feb 12 '14 at 18:02

score 2 · Accepted Answer · answered Feb 13 '14 at 15:15

First of all serialize() function don't work for file you should have to make an object of form through which you can post the data and will work perfectly I had the same problem and I have just resolved your issue and is working 100% because I have tested this. Please check out. The form.

<form name="multiform" id="multiform" action="process.php" method="POST" enctype="multipart/form-data">
               name : <input type="text" name="name" id="name"/>
               </br>
               message : <input type="text" name="message" id="message" />
               </br>
               Image : <input type="file" name="file" id="file" />
        </form>
               <input  type="button" id="multi-post" value="Run Code"></input>
               <div id="multi-msg"></div>

The script.

<script type="text/javascript">
$(document).ready(function(){
$("#multiform").submit(function(e)
{
    var formObj = $(this);
    var formURL = formObj.attr("action");

if(window.FormData !== undefined)  
    {
        var formData = new FormData(this);
        $.ajax({
            url: formURL,
            type: 'POST',
            data:  formData,
            mimeType:"multipart/form-data",
            contentType: false,
            cache: false,
            processData:false,
            success: function(data, textStatus, jqXHR)
            {
                    $("#multi-msg").html('<pre><code>'+data+'</code></pre>');
            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                $("#multi-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>');
            }           
       });
        e.preventDefault();
        e.unbind();
   }
});
$("#multi-post").click(function()
    {
    //sending form from here
    $("#multiform").submit();
});

});

</script>

And your php file is the same I have tested and is working.

<?php
  mysql_connect("localhost","root","");
  mysql_select_db("ajaxdatabase");

  $name=$_POST["name"];
  $message=$_POST["message"];
  //storing file in filename variable
    $fileName = $_FILES['file']['name'];
    //destination dir
    $to="image/".$fileName;

    move_uploaded_file($_FILES['file']['tmp_name'],$to);

  $query=mysql_query("INSERT INTO common(name,message,destination) values('$name','$message','$to') ");

  if($query){
    echo "Your comment has been sent";
  }
  else{
    echo "Error in sending your comment";
  }

?>

Thanks Alot Thanks Alot you made my day its working perfectly now i have to read this carefully thanks alot — Vicky, Feb 13 '14 at 15:19

file is not uploading in ajax php mysql

1 Answers1

Linked