ajaxを使用してブートストラップモーダルからファイルをアップロードする

Question

ajaxを使用して、ブートストラップモーダルウィンドウからファイルをサーバーにアップロードしようとしています。

モーダルHTMLは、私がこれを実行したときに、私は$ _FILES配列で何を見ていないです

<div class="modal-body"> 
<div> 
<form class="form" role="form" id="attachform" enctype="multipart/form-data"> 
<input type="file" name="file" id="file"> 
<button type="submit" class="btn btn-primary">Upload</button> 
</form> 
</div> 
</div> 

Javascriptを

$("#attachform").on('submit',function(event){ 
event.preventDefault(); 
var postData = new FormData($("#attachform")[0]); 
console.log(postData); 
$.ajax({ 
    url: "attachment.php", 
    type: "POST", 
    data: data, 
    processData: false, // tell jQuery not to process the data 
    contentType: false 
    }).done(function(msg) { 
    console.log(msg); 
    $('#myAttachModal').modal('hide'); 
      }); 
    }); 
}); 

PHPサーバーコード

print_r($_POST); 
print_r($_FILES); 

です。

提案がありますか？

Answer 1

あなたのAjax投稿のデータ値をpostDataに変更してください。 postDataにはフォームデータが含まれています。

変更このセクションでは、

data: data,

へ

data: postData,//this contains the form data

Answer 2

$.ajax({ 
    url: "attachment.php", 
    type: "POST", 
    data: postData, 
    processData: false, // tell jQuery not to process the data 
    contentType: false 
    }).done(function(msg) { 
    console.log(msg); 
    $('#myAttachModal').modal('hide'); 
      }); 
    }); 
});