post data-id using ajax form

Question

I've a question about ajax form. So, You can see my following ajax code have data-id . I'm getting this id in .pmsc div. But When I press #upmsc for uploading image then I am not getting any error, just getting this result from chrome developer console, no upload, no inserting the image name in database. What I'm doing wrong here.

Then ajax submit form is this

$('body').on('change', '#upmsc', function(e) {
   e.preventDefault();
   var id = $(".pmsc").attr("data-id");
   var data = 'id=' + id;
   $("#musicform").ajaxForm({
      type: "POST",
      data: data,
      cache: false,
      target: '.appended',
      beforeSubmit: function() {
         // Do Something
      },
      success: function(response) {
         // Do Something
         $(".showecho").html(response);
      },
      error: function() {}
   }).submit();
});

My html form is this:

    <form id="cfrm" class="options-form" method="post" enctype="multipart/form-data" action="'.$base_url.'upload.php">
       <label class="mcup" for="upcmsc"></label>
<input type="file" name="musicCover" id="upcmsc" />
    </form>
    <div class="pmsc" id="56">
    </div>

and PHP code is this

<?php
include_once 'inc/inc.php';
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST" && isset($_POST['id'])) {
    $id = mysqli_real_escape_string($db, $_POST['id']);
    $name = $_FILES['musicCover']['name'];
    $size = $_FILES['musicCover']['size'];
    if(strlen($name)) {
        $ext = getExtension($name);
        if(in_array($ext,$valid_formats)) {
            if($size<(50024*50024)) { 
                $actual_image_name = time().$uid.".".$ext;
                $tmp = $_FILES['musicCover']['tmp_name'];
                if(move_uploaded_file($tmp, $mcoverpath.$actual_image_name)) {
                    $data=$HuHu->Music_Cover_Image_Upload($id,$actual_image_name);
                    if($data){
                        echo '<img class="cover covermsc" src="'.$base_url.$mcoverpath.$actual_image_name.'">';
                        }
                  } else {
                      echo "Fail upload folder with read access.";
                }
                } else
                  echo "Image file size max 1 MB";                  
       } else
          echo "Invalid file format.";
     } else
         echo "Please select image..!";
        exit;
 }


?>

Answer 1

var data = 'id=' + id;
$("#musicform").ajaxForm({
  type: "POST",
  data: data,

You set the additional data to a string while it should be an object. That then fails your checks in the PHP code. So try this:

var data = {id: id};

Found some more problems with the PHP code braces, try this:

<?php
include_once 'inc/inc.php';
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST" && isset($_POST['id'])) {
    $id = mysqli_real_escape_string($db, $_POST['id']);
    $name = $_FILES['musicCover']['name'];
    $size = $_FILES['musicCover']['size'];

    if(strlen($name)) {
        $ext = getExtension($name);
        if(in_array($ext,$valid_formats)) {
            if($size<(50024*50024)) { 
                $actual_image_name = time().$uid.".".$ext;
                $tmp = $_FILES['musicCover']['tmp_name'];

                if(move_uploaded_file($tmp, $mcoverpath.$actual_image_name)) {
                    $data=$HuHu->Music_Cover_Image_Upload($id,$actual_image_name);
                    if($newdata){
                        echo '<img class="cover covermsc" src="'.$base_url.$mcoverpath.$actual_image_name.'">';
                    }
                } else {
                    echo "Fail upload folder with read access.";
                }
            } else {
                echo "Image file size max 1 MB";        
            }
        } else {
            echo "Invalid file format.";
        }
    } else {
        echo "Please select image..!";
        exit;
    }
} else {
    echo '1';   
}
?>