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 ...
-
-
PHPからWebAPI(screendot)経由で他サイトのスクリーンショットを取得する方法
PHPで他サイトのスクリーンショットを取得したい。今回はライブラリは無しで実現し ...
-
-
PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法
ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を ...
-
-
ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)
あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...
-
-
Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法
あるページにGif画像を設置し、当該画像が表示されても自動再生させず、再生ボタン ...