how to submit a form with file uploading using ajax...?

Question

i created a form. Thats shown below...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
$(document).ready(function(){

 $("#sbt").click(function(){
    var re=$("#file").val();



$.ajax({
            type: "POST",
            url: "loadajax.php",
            data: $("#data").serialize()+ '&photo=' +re,
            success: function(data) {

                $("#datas").html(data);
            },
            error: function(){
                  alert('error handing here');
            }
        });

});
});

</script>

Ajax response page

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

var_dump($_FILES);
?>

All input values are returned.but file is not uploaded.I don't know how to upload file using ajax. Please help me...

Use some Jquery Plugin such as "jquery Form" malsup.com/jquery/form/ supports all kinds of browsers too — Ashish, Jun 23 '14 at 10:18

score 0 · Accepted Answer · answered Jun 23 '14 at 10:27

Try This

$("#sbt").click(function(){
var pht = $("#ph").val();
var str2 = "your_folder/"; // destination folder, if needed
var upvid = str2.concat(pht);   

var data = new FormData();
data.append( 'photo', $('#photo')[0].files[0] );
data.append( 'pht', pht );



$.ajax({
        type: "POST",               
        url: "loadajax.php",
        processData: false,
        contentType: false,
        cache:true,
        data: data,             
        success: function(data){
           $("#datas").html(data
        } ,
        error: function(){
              alert('error handing here');
        }
    });     
});



<?php
$a = $_POST['pht'];
$file = str_replace( "\\", '/', $a );
$ofile = basename($file);

?>

Thanks Arun BS.This is working, but form input values are not getting. How to implement form.serialze() in this code...??? — Ali, Jun 23 '14 at 11:20
You must put
. And i know serializeArray(). var some_var= { }; $.each($('#form_id').serializeArray(), function() { some_varthis.name] = this.value; }); — Arun, Jun 23 '14 at 11:51

score -1 · Answer 2 · answered Jun 23 '14 at 10:18

-1

You have to use a plugin for this, jQuery doesn't support this out of the box. The best know plugin is ajaxForm

This will post the form to the given url in the form action field using ajax. There are events available to add validations and post-submit funcions.

answered Jun 23 '14 at 10:18

Jerodev

32,252
11
87
108

1

You don't need another plugin to upload files with AJAX. – Jonast92 Jun 23 '14 at 12:12

score -1 · Answer 3 · answered Jun 23 '14 at 10:34

you can also do like this:

function upload() {
    // id of the form "documentUploadForm"
    var form = document.getElementById("documentUploadForm");
    var formData = new FormData(form);
    var xhr = new XMLHttpRequest();
    var url = '<c:url value="/loadajax.php"/>';
    xhr.open('POST', url, true);
    xhr.onload = function(e) {
        if (xhr.status === 200) {
            outputData = JSON.parse(xhr.responseText);
            console.log("Response:" +outputData);
        }
    };
    xhr.send(formData);
}

how to submit a form with file uploading using ajax...?

3 Answers3