How to upload file temporarily and then submit form?

Question

See EDITED QUESTION BELOW

I am currently uploading file with following code. But I want to upload file temporarily and then want to submit form. I mean after selecting audiofile >> Click on upload button next to file upload field..>> Message= file uploaded successfully >> Then click on "Submit" Button to upload all data and temporarily uploaded file in mysql and audio file in related folder.... Currently , with this code I am unable to upload larger files. And after long wait, I get error message like "webpage in not available" I tried php.ini and .htaccess file update for max_execution_time, upload_max_filesize etc... also mod_security is disabled on server...

PHP code :

<?php
session_start();
// Database connection
include("../include/function.php");
include("commonfiles/validate.php");

// Create an object for an class
$bsq=new bsq();
//use class function to connect the database
$bsq->connect_db();
//
$fileName = $_FILES["audio"]["name"]; 
$fileNameNew = preg_replace('/\s+/', '_', $fileName);
$fileTmpLoc = $_FILES["audio"]["tmp_name"];
// Path and file name
$pathAndName = "uploadsaudio_admin/".$fileNameNew;
// Run the move_uploaded_file() function here
$moveResult = move_uploaded_file($fileTmpLoc, $pathAndName);
// Evaluate the value returned from the function if needed

$fileName1 = $_FILES["doc"]["name"]; 
$fileNameNew1 = preg_replace('/\s+/', '_', $fileName1);
$fileTmpLoc1 = $_FILES["doc"]["tmp_name"];
// Path and file name
$pathAndName1 = "uploadsaudiodoc_admin/".$fileNameNew1;
// Run the move_uploaded_file() function here
$moveResult1 = move_uploaded_file($fileTmpLoc1, $pathAndName1);
// Evaluate the value returned from the function if needed

$fileName2 = $_FILES["pdf"]["name"]; 
$fileNameNew2 = preg_replace('/\s+/', '_', $fileName2);
$fileTmpLoc2 = $_FILES["pdf"]["tmp_name"];
// Path and file name
$pathAndName2 = "uploadsaudioppt_admin/".$fileNameNew2;
// Run the move_uploaded_file() function here
$moveResult2 = move_uploaded_file($fileTmpLoc2, $pathAndName2);
// Evaluate the value returned from the function if needed

if($_POST['action']=="add"){
$all_columns[]="file_subject";
$all_columns[]="full_name";
$all_columns[]="upload_date";   
$all_columns[]="display_date";
$all_columns[]="message";   
    $all_columns[]="audio";
    $all_columns[]="doc";
    $all_columns[]="pdf";

    $display=date('Y-m-d', strtotime("+1 Day"));



//Get All values to insert in to table      
$all_values[]=addslashes($_POST["file_subject"]);
$all_values[]=addslashes($_POST["full_name"]);  
$all_values[]=addslashes($_POST["upload_date"]);
$all_values[]=$display; 
    $all_values[]=addslashes($_POST["message"]);
    $all_values[]=addslashes($pathAndName );
    $all_values[]=addslashes($pathAndName1 );
    $all_values[]=addslashes($pathAndName2 );


//=====================

$qry=$bsq->webdreaminsert("eo_uploadsaudio_by_admin",$all_columns,$all_values,'');
echo mysql_error();

header("location:upload_audiofile_for_downloading_list.php");
}   
?> 

And HTML Form code :

<form action="" method="post" enctype="multipart/form-data" name="addtwebinar1" id="addtwebinar1" onsubmit="javascript:return validateimage1();" >

 <input type="hidden" value="add" name="action" />

1) Audio File Subject* : <input name="file_subject" id="file_subject" type="text" value="" />

2) File Owner Name : <input name="full_name" id="full_name" type="text"  value="" />

3) Session Conducted On : <input type="text" autocomplete="off" name="upload_date" id="upload_date" placeholder="Click To Open calendar" readonly="readonly" />

4) Your Audio File For Upload : <label for="audio">Audio File To Upload: </label><br>
<input type="file" name="audio" id="audio" />
// Here I want temporary upload button with message "Upload successfully / Not Uploaded..." etc.....

5) Your Doc File For Upload : <label for="doc">Doc File To Upload: </label><br>
<input type="file" name="doc" id="doc" />

6) Your Question Answer File For Upload : <label for="pdf">Question Answer For Practice File To Upload: </label><br>
<input type="file" name="pdf" id="pdf" />

7) Message If Any : <textarea name="message" id="message" cols="" rows="3" placeholder="Message"></textarea>

<button>SUBMIT</button>
</form>

I want to add Upload Button Next to field number 4 where audio file will be uploaded temporarily and then after filling up other fields, form will be get submitted....

Or Any other solution to upload larger files ( around 40 to 50 MB size each) without any error with low internet speed ?

---

EDITED QUESTION : I used ajax for file uploading..... Now file gets uploaded to folder even 26 MB But mysql database is not getting updated.....

I have edited HTML code as follow with javascript :

1) Audio File Subject* : <input name="file_subject" id="file_subject" type="text" value="" />

2) File Owner Name : <input name="full_name" id="full_name" type="text"  value="" />

3) Session Conducted On : <input type="text" autocomplete="off" name="upload_date" id="upload_date" placeholder="Click To Open calendar" readonly="readonly" />

4) Your Audio File For Upload : <label for="audio">Audio File To Upload: </label><br>
<input type="file" name="audio" id="audio" />
// Here I want temporary upload button with message "Upload successfully / Not Uploaded..." etc.....

5) Your Doc File For Upload : <label for="doc">Doc File To Upload: </label><br>
<input type="file" name="doc" id="doc" />

6) Your Question Answer File For Upload : <label for="pdf">Question Answer For Practice File To Upload: </label><br>
<input type="file" name="pdf" id="pdf" />

7) Message If Any : <textarea name="message" id="message" cols="" rows="3" placeholder="Message"></textarea>

<button>SUBMIT</button>
</form>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js">    </script>
    <script src="source/jquery.form.js"></script>
    <script>
        (function() {

        var bar = $('.bar');
        var percent = $('.percent');
        var status = $('#status');

        $('form').ajaxForm({
            beforeSend: function() {
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%' + '' + 'Completed...';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            success: function() {
                var percentVal = '100%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            complete: function(xhr) {
                status.html(xhr.responseText);

  window.location.href='upload_audiofile_for_downloading_list.php';

            }
        });
    })();
</script>

And Code in upload_audiofile_process.php :

<?php
session_start();
include("../include/function.php");
include("commonfiles/validate.php");
include("fckeditor.php");
//=================================================================================
// Create an object for an class
$bsq=new bsq();
//use class function to connect the database
$bsq->connect_db();

$fileName = $_FILES["image"]["name"]; 
$fileNameNew = preg_replace('/\s+/', '_', $fileName);
$fileTmpLoc = $_FILES["image"]["tmp_name"];
// Path and file name
$pathAndName = "uploadsaudio_admin/".$fileNameNew;


// Evaluate the value returned from the function if needed

$fileName1 = $_FILES["doc"]["name"]; 
$fileNameNew1 = preg_replace('/\s+/', '_', $fileName1);
$fileTmpLoc1 = $_FILES["doc"]["tmp_name"];
// Path and file name
$pathAndName1 = "uploadsaudiodoc_admin/".$fileNameNew1;
// Evaluate the value returned from the function if needed

$fileName2 = $_FILES["pdf"]["name"]; 
$fileNameNew2 = preg_replace('/\s+/', '_', $fileName2);
$fileTmpLoc2 = $_FILES["pdf"]["tmp_name"];
// Path and file name
$pathAndName2 = "uploadsaudioppt_admin/".$fileNameNew2;
// Evaluate the value returned from the function if needed

       if (isset($_FILES["image"])) {
       if ($_FILES["image"]["error"] > 0) {
    echo "Error: " . $_FILES["file"]["error"] . "<br>";
    } else {
        move_uploaded_file($fileTmpLoc, $pathAndName);
        move_uploaded_file($fileTmpLoc1, $pathAndName1);
        move_uploaded_file($fileTmpLoc2, $pathAndName2);
        $all_columns[]="file_subject";
        $all_columns[]="full_name";
        $all_columns[]="upload_date";   
        $all_columns[]="display_date";
        $all_columns[]="message";   
        $all_columns[]="image";
        $all_columns[]="doc";
        $all_columns[]="pdf";

        $display=date('Y-m-d', strtotime("+1 Day"));



    //Get All values to insert in to table      
        $all_values[]=addslashes($_POST["file_subject"]);
        $all_values[]=addslashes($_POST["full_name"]);  
        $all_values[]=addslashes($_POST["upload_date"]);
        $all_values[]=$display; 
        $all_values[]=addslashes($_POST["message"]);
        $all_values[]=addslashes($pathAndName );
        $all_values[]=addslashes($pathAndName1 );
        $all_values[]=addslashes($pathAndName2 );


    //=====================

        $qry=$bsq->webdreaminsert("eo_uploadsaudio_by_admin",$all_columns,$all_values,'');
echo mysql_error();
 }  

  }

 ?>

This code is working for 10-15 MB file upload.... BUT if file is larger than 20 MB...NOT WORKING....

Answer 1

You can solve your problem with this way.

First call ajax function on your upload button.

$.ajax({
       url: 'example.php',
       type: 'POST',
       data: fileData,

     success: function(data) {
         // set file name or file id in some field using jquery.
          $('#fileHiddenFieldId').val(data);
         // and then set css property 'display:block' for submit button.
         $('#submitButtonId').css('display','block');
     }

    });

Here url example.php is filepath where you put your php file upload code. 'fileData' is your uploaded file data which you post.

When you get success response then set file id or file name in some hidden field then display submit button.