Ajaxでプラグイン無しのファイルアップロード方法
2024/01/13
画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかった。いつもであれば適当にjQueryのプラグインを用意して対応していたけど、ちょっと調べるとFormDataオブジェクトというWebAPIを用いることでプラグイン無しでも対応可能だった。サンプルとソースのメモ。
サンプルページ
https://taitan916.info/sample/formdata/
テキストデータと画像をajaxで送信し成功すれば同ページ内にvar_dumpしたデータが表示される。データの保存はしていない。
フォームがあるページ
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FormData オブジェクトのテスト</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form onsubmit="return testForm(this);" method="POST">
名前<br>
<input type="text" name="name"><br><br>
内容<br>
<textarea name="body"></textarea><br><br>
画像<br>
<input type="file" name="img"><br><br>
<input type="submit" value="送信" name="submit">
</form>
<pre id="result"></pre>
<script>
function testForm( form ){
var form_data = new FormData( form );
$.ajax({
url : "ajax.php",
type : "POST",
data : form_data,
cache : false,
contentType : false,
processData : false,
dataType : "html"
})
.done(function(data, textStatus, jqXHR){
if( data ){
$('#result').html(data);
}else{
alert('エラーが発生しました。');
}
})
.fail(function(jqXHR, textStatus, errorThrown){
alert("fail");
});
return false;
}
</script>
</body>
</html>
Ajax受取ページ
<?php var_dump($_POST, $_FILES);
リファレンス
https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects
https://developer.mozilla.org/ja/docs/Web/API/FormData
その他
プラグインを用意しなくてよいのは非常にありがたい。ブラウザのバージョンによっては対応していないようなのでその点は注意する。
関連記事
-
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...
-
jQueryで画像(
タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
画像アップロード前の時点で画像が選択されているか確認
やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...