Ajaxで非同期通信のデータの受け渡しをしたい

Question

Ajaxをつかって、PHP側にファイルのフルパスやファイル名などの情報を送りたいです。
ですが、下記の参考サイトを手本にやってみても、Ajaxの'data'に記述した情報がPHP側で受け取ってくれませんでした。

[参考サイト]
Ajaxでファイルをアップロード
PHP×jQuery(JS)×JSONでデータの送受信
比べてみてもid名やurl以外の違いはみつけられませんでした。
分かる方、改善策があるのか教えてほしいです。

[mst.html]

<h1>一覧画面</h1> 
  <br>
  <?php
   echo $this->Form->create(false, array('type' => 'file','id'=>"my_form")); 
     echo $this->Form->input('CsvFile', array('type' => 'file','class'=>'insrtcsv','id'=>'fup','accept'=>'text/csv'));
    echo $this->Form->submit('インポート',array('class'=>'newcsv','onclick'=> "file_upload()")); 
    echo $this->Form->end() ;    
   ?>  

[list.js]

 //ファイルのアップロード
function file_upload()
{
    // フォームデータを取得
    var formdata = new FormData($('#my_form')[0]);//クラスのインデックス0番目
    var send_data = {"f":formdata,"m":"成功しました。"}
      
    // POSTでアップロード
   $.ajax({
       url:'/Bank/csv_insert',
        async: true,
        type: "POST",
        cache: false,
        processData: false,
        contentType: false,
        data:send_data,
         dataType    : "json"
    })
    .done(function(data, textStatus, jqXHR){
        alert(data);
    })
    .fail(function(jqXHR, textStatus, errorThrown){
         console.log("jqXHR          : " + jqXHR.status); // HTTPステータスが取得
            console.log("textStatus     : " + textStatus);    // タイムアウト、パースエラー
            console.log("errorThrown    : " + errorThrown.message); // 例外情報
    });
}

[ListController.php]

 public function csv_insert() {
        try {
$MM = "読み込めない";
            //ファイルの読み込み
 if($this->request->is('ajax')){
           $f = $this->request->data['CsvFile']['f'];
           $MM = $this->request->data['CsvFile']['m'];//一時保存ファイル名
      }
            $file_name = $f['name'];//ファイル名
            $file_tmp  = $f['tmp_name']
            $ckdir = realpath(TMP."/upcsv")."/".$file_name;//サーバアップロード用
            move_uploaded_file($file_tmp, $ckdir);
             
       
            return json_encode($MM);
            
        } catch (Exception $ex) {
            $this->log($ex, 'error');
        }
    }

フレームワーク:cakePHP2.10
開発環境:NetBeans
ブラウザ:GogleChrome

Comments

[退会済みユーザー]

クライアント側の問題なのか、サーバー側の問題なのか切り分けてください。

[j-nagnn]

恐らくクライアント側なのかなと思います。
だから、クライアント側をサーバー側でやり取りが行えないのでしょうか?

[退会済みユーザー]

「恐らく」「思います」というイイカゲンな話ではなく、Fiddler などのキャプチャツールを使ってきちんと切り分けてください。要求が期待通り出ているか、内容は OK か、サーバー側からの応答は返ってきているか、それは期待通りかは少なくともわかるはず。ちゃんと調べてください。それができるのは質問者さんだけです。

[j-nagnn]

xdebugを使っているのですが、サーバー側からの応答は来ていません。

[退会済みユーザー]

Fiddler などのキャプチャツールを使ってきちんと切り分けてください。要求が期待通り出ているか、内容は OK か、サーバー側からの応答は返ってきているか、それは期待通りかは少なくともわかるはず・・・はやらないという返事ですか？

[j-nagnn]

やらないという返事です。やらないと分からないものなんですね。

[退会済みユーザー]

> やらないという返事です。やらないと分からないものなんですね。

切り分けすらできないのにそんな偉そうなことは言わないでほしいね

Answer 1

とりあえずsubmitの回避していませんよね？
'onclick'=>"file_upload();return false"
的な処理が必要かもしれません。
（生のHTMLで書いてください）

Comments

[j-nagnn]

<button type="submit" class="newcsv" onclick="file_upload(); return false">データインポート</button>

という感じでしょうか?

[yambejp]

そうですね、とりかくsubmit機能を殺すところからやらないと
非同期処理ができません

[yambejp]

普通にやればこうなります

<script>
window.addEventListener('DOMContentLoaded', ()=>{
const fup=document.querySelector('#fup');
fup.addEventListener('submit',e=>{
e.preventDefault();
var body = new FormData(fup);
var method ="post";
var url="hoge.php";
fetch(url,{method,body}).then(res=>res.text()).then(console.log);
});
});
</script>

<form id='fup' method='post' enctype="multipart/form-data" action="hoge.php";>
<input type='file' name='csvF' class='insrtcsv' accept='.csv'>
<input type='submit' class='newcsv'>
</form>