Want to upload image and data to database through ajax

Question

I have a form (using PHP & HTML) and my strict requirement is that, I want to upload an image and data to database without refreshing the page. In my form there is some input fields for collecting data, one browse button for picking up image (as input type="file") & a button called submit and when user clicks the submit button I want to call an ajax function to collect data from form and to submit them. (I don't want to refresh the page and hence using ajax call) Please any help...!!!!

What have you tried for this? You have just posted your requirement here!!!!!!!!!!! — Vinoth Babu, Apr 10 '13 at 05:05
I have tried from within form.....and working on this concept...not yet suceeded.... — Caution Continues, Apr 10 '13 at 05:06
http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/ — open source guy, Apr 10 '13 at 05:07
Look: http://stackoverflow.com/questions/15824177/image-upload-ajax-php-mysql/15824563#15824563 — egig, Apr 10 '13 at 05:08
@messifan Dude code is very long....this is very small part of the project.....I am not able to do both the thing in just one click...right now I can either upload image or data... — Caution Continues, Apr 10 '13 at 05:10
Possible duplicate of http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery?rq=1 — asprin, Apr 10 '13 at 05:29

score 1 · Accepted Answer · answered Apr 10 '13 at 05:10

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 
</head> 
<body>

<form id="myForm" action="test2.php" method="post" enctype="multipart/form-data"> 
    Name: <input type="text" name="name" /> 
    Comment:<input type="file" name="image">
    <input type="submit" value="Submit Comment" /> 
</form>
</body>
</html>

php file test.php here you process your file upload and DB operation

<?php 
echo "<pre>"; print_r($_FILES); exit;
?>

looks sound, is it possible to do multiple file upload? – Thirumalai murugan Apr 10 '13 at 05:27 — Thirumalai murugan, Apr 10 '13 at 05:27
yes you can upload multiple file too – Praveen kalal Apr 10 '13 at 05:29 — Praveen kalal, Apr 10 '13 at 05:29

score 0 · Answer 2 · answered Apr 10 '13 at 05:14

Use JQuery to submit the form, there is a predefined function called .ajaxForm

$(document).ready(function() { 
                $('#formName').ajaxForm(function() { 

                }); 
            });

It will directly contact your action page and you can perform the operation in the controller.

Want to upload image and data to database through ajax

2 Answers2