同じような記事はかなりありますが、よく忘れるのでメモ。
#ajaxでファイルのアップロード
<form>
<input type="file" name="upfile">
<button id="upButton" type="button">送信</button>
</form>
let $upfile = $('input[name="upfile"]');
let fd = new FormData();
fd.append("upfile", $upfile.prop('files')[0]);
$('#upButton').on('click', function () {
$.ajax({
url:'index.php',
type:'post',
data: fd,
processData: false,
contentType: false,
cache: false,
}).done(function (data) {
// 成功時の処理
}).fail(function() {
// 失敗時の処理
});
});
index.php
$upfile = $_FILES['file'];
#formの中身をまとめて送信
<form>
<input type="file" name="upfile">
<input type="text" name="foo" value="bar">
<input type="hidden" name="hoge" value="fuga">
<button id="upButton" type="button">送信</button>
</form>
let $form = $('form');
let fd = new FormData($form.get(0));
$('#upButton').on('click', function () {
$.ajax({
url:'index.php',
type:'post',
data: fd,
processData: false,
contentType: false,
cache: false,
}).done(function (data) {
// 成功時の処理
}).fail(function() {
// 失敗時の処理
});
});
index.php
$upfile = $_FILES['upfile'];
$foo = $_POST['foo'];
$bar = $_POST['hoge'];
#参考URL
JavaScript(jQuery)からPHPのAPIを利用する
https://qiita.com/mpyw/items/62e6e415f86eb30a5ff4
[JavaScript] Ajaxでファイルをアップロード【jQuery使用】
https://qiita.com/yasumodev/items/cffb735f46ffd489a4db
ajaxでファイルをアップロードする方法(メモ)
https://qiita.com/BRS_matsuoka/items/ba79a2f500a10ddc0923
Ajaxを用いてテキストと画像ファイルを投稿する
https://qiita.com/sho012b/items/f2558db5dad97d7e1b1d