如何使用ajax更新带附件图像的表单？

I use a form with 5 input type text as name nm ,gd,pn,al,np and input type file 'image' as name file. I'm using this code but it didnt work, I don't know what is the problem! any help please.. thank you in advance!

  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
    <button type="button" onclick="updatedata('<?php echo $row['cin']; ?>')" class="btn btn-primary">Enregistrer</button>
  </div>

function updatedata(str){

    var id = str;
            var m_data = new FormData();    
            m_data.append( 'nm', $('input[name=nm]'+str).val());
            m_data.append( 'gd', $('input[name=gd]'+str).val());
            m_data.append( 'pn', $('input[name=pn]'+str).val());
            m_data.append( 'al', $('input[name=al]'+str).val());
            m_data.append( 'np', $('input[name=np]'+str).val());
            m_data.append( 'file', $('input[name=file]')[0].files[0]);
    $.ajax({
       type: "POST",
       url: "updatedata.php?id="+id,
       data: m_data

    })
    }