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
その他
プラグインを用意しなくてよいのは非常にありがたい。ブラウザのバージョンによっては対応していないようなのでその点は注意する。
関連記事
-
-
JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法
外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)
画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...