PHP
JavaScript
Ajax

ajax(jQuery)でファイルをアップロードする

同じような記事はかなりありますが、よく忘れるのでメモ。


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