0

I am trying to send form data along with MP3 file to PHP page using jQuery. I am facing a problem with MP3 file. Please see the below code for better understanding.

My HTML code

<form id="AddSongProcess" method="post" enctype="multipart/form-data">
  <div class="col-md-9">
   <div class="form-group label-floating">
     <label class="control-label">Song Title</label>
     <input id="song_title" type="text" class="form-control" name="songtitle" required>
   </div>
 </div>

 <div class="col-md-4">
   <div class="form-group label-floating">
     <select name="alphbit" class="form-control" id="alphabit">
      <option value="" selected disabled>Select Alphabit</option>
      <option   value"A">A</option>
      <option   value"Aa">Aa</option>
      <option   value"I">I</option>
      <option   value"EE">EE</option>
      <option   value"U">U</option>
      <option   value"Uu">Uu</option>
      <option   value"E">E</option>
      <option   value"EI">EI</option>
      <option   value"O">O</option>
      <option   value"Oo">Oo</option>
      <option   value"Ka">Ka</option>
      <option   value"Ga">Ga</option>
      <option   value"Cha">Cha</option>
      <option   value"Ja">Ja</option>
      <option   value"Tha">Tha</option>
      <option   value"Da">Da</option>
      <option   value"Na">Na</option>
      <option   value"Pa">Pa</option>
      <option   value"Ba">Ba</option>
      <option   value"Bha">Bha</option>
      <option   value"Ma">Ma</option>
      <option   value"Ya">Ya</option>
      <option   value"Ra">Ra</option>
      <option   value"La">La</option>
      <option   value"Va">Va</option>
      <option   value"Ssa">Ssa</option>
      <option   value"Sha">Sha</option>
      <option   value"Sa">Sa</option>
      <option   value"Ha">Ha</option>
    </select>
  </div>
</div>

<div class="col-md-9">
 <div class="form-group label-floating">
   <textarea id="song_lyrics" name="song_lyrics" class="form-control" rows="15" placeholder="Type Your Song here"></textarea>
 </div>
</div>
<div class="col-md-9">
 <div class="form-group label-floating">
   <label class="control-label">Author Title</label>
   <input id="author" type="text" class="form-control" name="author">
 </div>
</div>

<div class="col-md-12">
 <input id="audio" type="file" name="audio" accept="audio/*">
</div>


<p>&nbsp;</p>
<div id="loading"></div>

<div class="clearfix"></div>
<button type="submit" class="btn btn-primary pull-left" style="margin-left:20px;">Save Song</button>
</form>

and bellow is my jQuery

<script>
$('form#AddSongProcess').on('submit',function(e){
    e.preventDefault();
    tinyMCE.triggerSave();
    var formData = new FormData($('#AddSongProcess')[0]);
    var formData = $(this).serialize();

     $('#loading').show();
    $.ajax({

        type:'post',
        url:'new-songs-process.php',
        fileElementId:'audio',
        data:formData,
            success: function(AddSong){
            $('#loading').hide();
            alert(AddSong);
            //window.location = "dashboard.php";
            }                          
        });
    });
</script>

I am getting resopnse of form data except mp3 file. I checked using print_r($_POST) and print_r($_FILES). How to send mp3 file to php page using jQuery?

Maldonado
  • 17
  • 2
Asesha George
  • 2,232
  • 2
  • 32
  • 68

0 Answers0