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 : stackoverflow.com/questions/166221/… , you'll probably find a solution there — Sylvain
– Sylvain, Commented Feb 12, 2014 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
– Vicky, Commented Feb 12, 2014 at 16:41
Check the value of form_data after var form_data = $('#reg_form').serialize();, you should see the problem. — Sylvain
– Sylvain, Commented Feb 12, 2014 at 16:49
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
– Sylvain, Commented Feb 12, 2014 at 16:58

Aitazaz Khan · Accepted Answer · 2014-02-13 15:15:39Z

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

Collectives™ on Stack Overflow

file is not uploading in ajax php mysql

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related