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> </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?