Upload audio file using Ajax and PHP

Question

I am trying to upload an audio file.

What am doing is passing the audio file through Ajax to PHP where the upload and other insert to my database will be done.

After passing it through Ajax, my PHP page does not see the audio file.

<script type="text/javascript">
$(function () {

  $('form').on('submit', function (e) {

    e.preventDefault();

    document.getElementById("load").style.display = "block";
    textarea = $('#editor-one').html();
    var formData = new FormData($(this)[0]);
    formData.append("content", textarea);

    $.ajax({
      type: 'post',
      url: 'verimg.php?ins=newmu',
      data: formData,

      cache: false,
      contentType: false,
      processData: false,
      success: function(data){
        document.getElementById("load").style.display = "none";
        //alert(textarea);
        jQuery('#get_result').html(data).show();
      }
    });
  });
});

  </script>

Here is my PHP code:

if(!isset($_FILES['file'])){
  echo '<div class="alert alert-warning">
          <strong>Warning!</strong> Please select an audio
        </div>';
}else{
  $uploaderror='';
  $name = ucfirst($_POST['name']);
  $artist = $_POST['artist'];
  $content = $_POST['content'];
  $genre = $_POST['genre'];

  $validator = new FormValidator();
  $validator->addValidation("name","req","Please fill in Music Name");
  $validator->addValidation("category","req","Please Select Artist");
  $validator->addValidation("category","req","Please Select Genre");
}

I always get "Warning! Please select an audio".

I think you need to check out this Q&A: https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — finelog, May 26 '17 at 06:36

score 1 · Answer 1 · answered May 26 '17 at 06:36

I have made changes to your formData. In your php code you are trying to check the 'file' key in your global $_FILES variable but in your formData variable the audio file isn't attached to any 'key'. Hope it works :)

<script type="text/javascript">
 $(function () {

$('form').on('submit', function (e) {

  e.preventDefault();

  document.getElementById("load").style.display = "block";
  textarea = $('#editor-one').html();
  var formData = new FormData();
  formData.append("file", e.target.files[0]);
  $.ajax({
    type: 'post',
    url: 'verimg.php?ins=newmu',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data)
    {
        document.getElementById("load").style.display = "none";
        //alert(textarea);
        jQuery('#get_result').html(data).show();
    }
  });

});

});

</script>

In my experience use XMLHttpRequest with FormData instead of AJAX. I think there is a compatibility issue. var request = new XMLHttpRequest(); var formData = new FormData(); formData.append("file", e.target.files[0]); request.open("POST", 'verimg.php?ins=newmu', true); // set other headers request.send(formData); request.onload = function(){ // success } request.onerror = function(){ //error } — Abdul Samad, May 26 '17 at 11:08

score 0 · Answer 2 · answered May 26 '17 at 09:08

0

Try to add enctype='multipart/form-data' to your form tag.
;)

A long painfull Reference is here.

answered May 26 '17 at 09:08

Louys Patrice Bessette

33,375
6
36
64

Upload audio file using Ajax and PHP

2 Answers2