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
その他
プラグインを用意しなくてよいのは非常にありがたい。ブラウザのバージョンによっては対応していないようなのでその点は注意する。
関連記事
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
Ajaxで画像のアップロード(jquery.upload)
業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...
-
jQueryで画像が存在すれば表示、なければノーイメージ画像を表示
やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...
-
jquery.snipeの使い方
使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...
-
jQuery.uploadでリアルタイムプレビュー
やりたい事は、 ・<input type="file">で画像を選択 ...