ajaxでpostした時にブラウザ別でデータが受け取れない

Question

前提・実現したいこと

画像データをajaxでpostしてcakePHPで受け取りたい

発生している問題・エラーメッセージ

IEでは正常に動作するがChrome・Edgeでは動作しない

該当のソースコード

ajax部分↓

var image = document.getElementById('image');
var formdata = new FormData();
formdata.append("image", image.files[0]);

var ajax = new XMLHttpRequest();
ajax.open("POST", "{$UrlFormat->httpsUrl('/uploadImage')}", true);
ajax.setRequestHeader("Content-Type","multipart/form-data");
ajax.send(formdata);

cakePHPのController↓

$image = $_FILES['image']; // 中身がnullになる

Controllerでデータがnullになります。
詳しい方おられましたら調べ方や注意点でもよいので教えていただきたいです。

補足情報（FW/ツールのバージョンなど）

cakePHP2系
Apache2.4.6
CentOS7

Answer 1

いまさらIE対応が必要ですか？fetchでやってみてはどうでしょうか？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const image = document.querySelector('#image');
  image.addEventListener('change',()=>{
    const formdata = new FormData();
    formdata.append("image", image.files[0]);
    const url="sample.php";
    fetch(url,{method:'post',body:formdata}).then(res=>res.text()).then(console.log);
  });
});
</script>
<input type="file" id="image">

//sample.php

<?PHP
print_r($_FILES);

Comments

[hidetakamaru]

>> いまさらIE対応が必要ですか？
どうやらIE対応してほしいとのことらしいので、、

fetchでもpostしてみたのですが、結果変わらずでした。
apacheの設定とかも関係あるのでしょうか。

[yambejp]

複数ブラウザで試した範囲では上記ソースでファイルを選んだときに
バックグラウンドで送信されますね。
なにか特殊な環境なのでしょうか？OSやブラウザを明示されたほうがよいかと。

またIEの場合fetchのpolyfillが提供されているようですが結局ES6にも
対応していないので微妙ですね
IEは非同期処理ではなく普通にサブミットするという切り分けが妥当かと。