Upload Mp3 file using jquery(jqgrid) without refreshing page

Question

I tried to upload mp3 songs in to directory. But the file is not uploaded. I dont know where i was wrong. I send a sample code.

This is my code

<script type="text/javascript" language="javascript"> 
    jQuery().ready(function (){
        jQuery("#list").jqGrid({
          url:'music.php',
          datatype:"xml",
          mtype:'POST',
          colNames:[        
             'File Name',
         'File Upload',
          colModel:[
         {name:'id',index:'id', width:20,editable:false,editoptions {readonly:true,size:25}},                                    {name:'file_name',index:'file_name', width:-10,sortable: false,hidden:false,editable: true,edittype:"text",editoptions:

{readonly:true,size:25}},                                                                                                                                 {name:'fileToUpload',index:'fileToUpload',width:-10,editable:true,edittype:'file',editoptions:{size:25},formoptions:{elmprefix:"&nbsp;",elmsuffix:"<button id='buttonUpload'class='button' onclick='return ajaxFileUpload();'>Upload</button><br/>"}},                        ],
            rowNum:10,
            autowidth: true,
            rowList:[10,20,30],
            pager: jQuery('#pager'),sortname:'title',viewrecords: true, sortorder: "desc", caption:"Manage Music",editurl:"music_add.php"
        })
    }).navGrid('#pager',{edit:true,add:true,del:true,view:true});   

function ajaxFileUpload() {
var filename = $("#fileToUpload").val();
document.getElementById('file_name').value =  document.getElementById('fileToUpload').value;
      $("#buttonUpload").click(function() { 
    $.ajax
        ({
        type: "FILE",
        url: 'music_add.php',
        data: {file:filename},
                success: function(data){
                //alert( "Data Uploaded:" + filename);
            }
            });
     }); 
    return false;
}

$("#bedata").click(function(){
    jQuery("#list").jqGrid('editGridRow',"new",{height:630,width:350,reloadAfterSubmit:true,closeAfterAdd:true,addCaption:'Add Music',saveData:'saved!'});
    $("form#FrmGrid_list")
    .attr("enctype","multipart/form-data")
    .attr("encoding","multipart/form-data")
    ;
});
</script>
 </html>

PHP Code:

if ($_POST["oper"] == "add") 
{
    $uploaddir = 'uploads/';
    $uploadfile = $uploaddir . basename($_FILES['fileToUpload']['name']);
    if (move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) {
        print('File is valid, and was successfully uploaded. ');
    } else {
        echo "Upload error:  File may be to large.<br />\n";
    }
    chmod($uploadfile, 0744);
}

Answer 1

You cannot upload a file using ajax. You have to either upload it through normal requests or using other alternatives like frames or flash. Here is an example with flash:

http://demo.swfupload.org/v220/index.htm