Upload without refresh using AJAX?

Question

I have a page HTML and a page on PHP where I receive 2 files being one audio and the other an image and some input information.

I would like the moment you make the post not redirect to the PHP, then open a window, a modal and display a gif loading and when finished firing a message to the user.

How could I do this using AJAX?

<div class="form-group">
            <label class="col-sm-3 control-label">Título</label>
            <div class="col-sm-6">
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">Texto</label>
            <div class="col-sm-6">
              <textarea class="form-control" style="padding: 0px 0px 30px;resize: none;"></textarea>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">Imagem para Campanha</label>
            <div class="col-sm-6">
              <div class="fileinput fileinput-new" data-provides="fileinput">
                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                  <img src="http://placehold.it/190x140/7761A7/ffffff" alt="...">
                </div>
                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                <div>
                  <span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar imagem</span><span class="fileinput-exists">Alterar</span><input type="file" name="..."></span>
                  <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remover</a>
                </div>
              </div>
            </div>
          </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">Áudio para a campanha</label>
            <div class="col-sm-6">
              <div class="fileinput fileinput-new" data-provides="fileinput"><input name="..." value="" type="hidden">
                <span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar áudio</span><span class="fileinput-exists">Alterar</span><input name="" type="file"></span>
                <span class="fileinput-filename"></span>
                <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">×</a>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-6">
              <button data-toggle="modal" data-target="#md-default" type="button" class="btn btn-info btn-lg"><i class="fa fa-check"></i> <b>Enviar</b></button>

            <!-- Modal -->
                          <div class="modal fade" id="md-default" tabindex="-1" role="dialog">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button " class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  </div>
                  <div class="modal-body">
                    <div class="text-center">
                      <div class="i-circle primary"><i class="fa fa-check"></i></div>
                      <h4>Confirma o envio?</h4>
                      <p></p>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary btn-flat" data-dismiss="modal">Sim</button>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
                          </div><!-- /.modal -->
            </div>
          </div>



  </div>

PHP

    if(isset($SUBIMIT))
{
$name = $_FILES["fileUpload"]["name"];
//$nome_imagem = $name[0]; 

if(isset($_FILES['fileUpload']))
   {
      require 'WideImage/WideImage.php';
      date_default_timezone_set("Brazil/East");
      $name     = $_FILES['fileUpload']['name'];
      $tmp_name = $_FILES['fileUpload']['tmp_name'];
      $allowedExts = array(".gif", ".jpeg", ".jpg", ".png", ".bmp");
      $dir1 = 'uploads/';
      for($i = 0; $i < count($tmp_name); $i++)
      {
         $ext = strtolower(substr($name[$i],-4));
         if(in_array($ext, $allowedExts))
         {
            $new_name = date("Y.m.d-H.i.s") ."-". $i . $ext;
            $image = WideImage::load($tmp_name[$i]);
            $image = $image->resize(170, 180, 'outside');
            $image = $image->crop('center', 'center', 170, 180);
            $image->saveToFile($dir1.$new_name);
            $nome_imagem = $new_name;
         }
      }
   }
}

if (isset($SUBIMIT))
{
    $name = $_FILES["fileUploadAudio"]["name"];
    $fileName = $_FILES["fileUploadAudio"]["name"]; // The file name
    $fileTmpLoc = $_FILES["fileUploadAudio"]["tmp_name"]; // File in the PHP tmp folder
    $fileType = $_FILES["fileUploadAudio"]["type"]; // The type of file it is
    $fileSize = $_FILES["fileUploadAudio"]["size"]; // File size in bytes
    $fileErrorMsg = $_FILES["fileUploadAudio"]["error"]; // 0 for false... and 1 for true
    $tmp_name = $fileTmpLoc;
    for ($i = 0; $i < count($tmp_name); $i++)
        {
            $ext = strtolower(substr($name[$i], -4));
            $new_name = date("Y.m.d-H.i.s") . "-" . $i . $ext;
            if (!$fileTmpLoc)
            { // if file not chosen
                echo "ERROR: Please browse for a file before clicking the upload button.";
                exit();
            }

            //if (move_uploaded_file($fileTmpLoc[$i], "uploads_audios/$new_name"))
            if (move_uploaded_file($fileTmpLoc[$i], "uploads_audios/$new_name"))
            {
            /*echo "$fileName|Upload is complete";
            echo "<br />";
            echo "<audio controls>";
            echo "<source src='uploads_audios/$fileName' type='audio/mpeg'>";
            echo "Your browser does not support the audio element.";
            echo "</audio>";
            */
            }
            else
                {
                    echo "move_uploaded_file function failed";
                }
        }
}