photo not storing onto the database. php [undefined Index]

Question

I have form like this:

<form class="wrefresh" action="Code Files/Accused.php" method="post" enctype="multipart/form-data">

<div class="row-form">
    <div class="span3" style="margin-top: 06px">Picture:</div>

     <div id="photo_settings2" style="margin-left:11px;">
         <img id="Picture2" src="../../img/User No-Frame.png"/>       
     </div>

    <div id='Upload_Panel'>
       <input name="file" type='file' id='file_browse' onchange="readURL(this,'Picture2')"    style="cursor: pointer;"/>
    </div>
</div> 

<button type="submit" class="a-btn2"style="cursor: pointer; background-color:#5C635F; color:white; font-family:'Candara'; margin-top:-47px; margin-left:192px; height:37px;"><big>Submit</big></button>

</form>

I have a php code in Accused.php:

$Mother_Language           =         $_POST['mlang'];
$Other_Languages           =         $_POST['olang'];
$Complexion                =         $_POST['comp'];
$Previous_Thug_Record      =         $_POST['precord'];
$Religion                  =         $_POST['religion'];
$Type_of_Accused           =         $_POST['taccused'];              
$City                      =         $_POST['city'];
$Country                   =         $_POST['country'];
$Nationality               =         $_POST['nationality'];
$ID_Mark                   =         $_POST['idmark'];
$Hair_Color                =         $_POST['haircolor'];
$Occupation                =         $_POST['occupation'];
$Academic_Info             =         $_POST['ainfo'];
$Alias                     =         $_POST['alias'];
$Caste                     =         $_POST['caste'];
$Sect                      =         $_POST['sect'];
$Remarks                   =         $_POST['remarks'];

    $photo    =   $_POST['file'];   // giving error : undefined index/ getting nothing from the form.

my ajax function is:

<script>
var frm = $('.wrefresh');

frm.submit(function (ev)
{

    ev.preventDefault();

    var postdate = $(this).serialize();
    var path = $(this).attr("action");
    var mehtodtype = $(this).attr("method").toUpperCase();

    $(".loadingimg").show();

    $.ajax
    ({
        type: mehtodtype,
        url: path,
        data: postdate,
        success: function(data) 
        {
            // Get Form Data.
            $("#FIRtable").html(data);
            $("#Accusedtable").html(data);

            // Clear fields data.
            $('form :input[type=text], textarea').attr('value', '');

            // show hide icons when click on submit.
            $(".loadingimg").delay(1000).fadeOut();
            setTimeout(function()
            {
                $(".okicon").fadeIn('slow');
                $(".okicon").delay(2800).fadeOut();
            }, 1800);
        }
    });
});
</script>

I think my error is because of the ajax function i am using. I am getting every thing working except $photo = $_POST['file']; this // giving error : undefined index . help would be appreciated.

Answer 1

Uploading files through AJAX is a lot more complex than just referencing the $_FILES array. You'll need something like this to handle the file upload:

function upload_file() {
    var formData = new FormData( document.getElementById( "form-uploader" ));

    $.ajax( {
        url         : "Code Files/Accused.php",
        type        : "post",
        xhr         : function() {
            my_xhr = $.ajaxSettings.xhr();
            if( my_xhr.upload ) {
                my_xhr.upload.addEventListener( "progress", handler_progress, false );
            }

            return my_xhr;
        },

        beforeSend  : handler_before_send,
        success     : handler_complete,
        error       : handler_error,
        data        : formData,
        contentType : false,
        processData : false
    } );
}

The primary difference between this and your code is that it employes the JavaScript FormData object, which is required to upload files with AJAX.

And then a variety of supporting functions that will be called when the upload starts, what its progress is, if there are any errors, and when it completes:

function handler_progress( e ) {
    if( e.lengthComputable ) {
        $( "progress" ).attr( {value:e.loaded, max:e.total} );
    }
}

function handler_before_send( e ) {
    var progress = $( "<progress></progress>" ).attr( "id", "progress-bar" );
    $( "#form-uploader" ).append( progress );
}

function handler_error( e ) {
    alert( "error" + e );
}

function handler_complete( e ) {
    // The browser has completed the upload, do any clean-up here
}

This is mostly copy-and-paste from one of my projects where I do what you're describing (with a couple of changes to tie it in with your code), so you'll see some elements referenced by ID that are in my HTML that you'll have to modify. But this is essentially what you're looking for to upload files via AJAX.