How to upload video using jQuery AJAX.

Upload video file using ajax call, So I have tried with simple ajax call unfortunately I have not getting FILE objects in server side script.

How to send html FILE type object data using ajax on server side script.
I am facing the issues of uploading video file in ajax call, FILE data not getting in server side.

For that reading documents of jquery and plug n play with different scenario then I got final solution and writing demo example of HTML with ajax call for video upload with progress bar.

Please find below HTML for video upload with progress bar:

                        
                        Add Video Message
                    
                

Continue
                

You need to disable progress bar first while on click of continue button it will be display for precessing of video upload. Please refer screenshots



jQuery('#frm_ecard').serializeArray(); using this function get all form data values and added into formdata.

After creating for formdata object initiates ajax request for server side to store video. Formdata used for store key/values of given form.

Below is the jquery ajax call for video upload

Below css I have used for displaying progress bar of processing video upload.

progress {background:#ccc; border: 1px solid #ff5a5f; border-radius: 5px; color: #ff5a5f; font-size: 0.6em; height: 3.8em;line-height: 1.5em;text-indent: 0.5em;}
progress[value]::-webkit-progress-bar {background-color:#ff5a5f;}
progress::-moz-progress-bar { background:#ff5a5f; }
progress::-webkit-progress-value { background:#ff5a5f; }
progress { color:#ff5a5f; }

/* Background Colors  */ 
progress,                          /* Firefox  */ 
progress[role][aria-valuenow] {    /* Polyfill */
   background: #ccc !important; /* !important is needed by the polyfill */
}
/* Chrome */
progress::-webkit-progress-bar {
    background: #ccc !important;
}
/* Foreground Colors   */ 
/* IE10 */
progress {
    color:#ff5a5f;
}
/* Firefox */
progress::-moz-progress-bar { 
    background: #ff5a5f;   
}
/* Chrome */
progress::-webkit-progress-value {
    background:#ff5a5f;
}
/* Polyfill */
progress[aria-valuenow]:before  {
    background: #ff5a5f;
}