【コピペで使える】画像アップロード付きAjax（JQuery）フォームサンプル
tasanはじめに
今回は、Ajaxを利用した画像アップロード機能付きフォームのサンプルを作成します。
画像ファイルをアップロードするだけのサンプルは複数見つかったのですが、画像ファイル以外のテキスト情報も一緒に取り扱っているサンプルでわかりやすいものがなかったので、備忘録としてまとめておきたいと思います。
応用しやすいように、必要最低限の機能を持った内容とします。
HTML部
<form id="send-form" method="post" enctype="multipart/form-data">
<input type="text" id="name" name="name" placeholder="お名前を入力してください。" value="" /><br />
<textarea placeholder="内容を入力して下さい。" id="body" name="body" rows="10"></textarea><br />
<input type="file" name="file1"><br />
<input type="submit" value="送信する" />
</form>
とてもシンプルなHTMLですね。デザイン情報は制作される方によって異なる部分になると思いますので、できる限り省いています。
Jquery部
<script type="text/javascript">
$(function() {
/* 送信処理 */
$('#send-form').submit(function() { // submit押下時に実行する
/* 入力値の取得 */
var name = $('#name').val();
var body = $('#body').val();
/* 必須項目チェック */
if(name != "" && body != ""){
/* 画像ファイルの取得・セット */
var fd = new FormData();
var fd = new FormData($('#send-form').get(0));
/* その他フォームデータのセット */
fd.append('name', name); // 名前
fd.append('body', body); // 内容
/* Ajax経由で画像登録 */
$.ajax({
url: 'upload.php', // 画像登録処理を行うPHPファイル
type: 'POST',
data: fd,
cache: false,
contentType: false,
processData: false,
dataType: 'html'
}).done(function(data){
alert("送信が完了しました。");
location.href = "./"; // ページリロード
});
} else {
alert("未入力の項目があります。");
}
return false; // submitをキャンセル
});
});
</script>
できるだけシンプルにと思いましたが、必須項目チェックは利用する機会が多いと思いましたので入れました。
フォームの項目については、増えた分だけ取得して、fd.append()で追加してゆけば、fd内に登録されます。
※fdは変数名ですので任意の名称をつけて頂けば結構です。
PHP部（upload.php）
<?php
/* 必須項目チェック */
if( !empty($_POST['name'])
&& !empty($_POST['body'])
){
/* 拡張子情報の取得・セット */
$imginfo = getimagesize($_FILES['file1']['tmp_name']);
if($imginfo['mime'] == 'image/jpeg'){ $extension = ".jpg"; }
if($imginfo['mime'] == 'image/png'){ $extension = ".png"; }
if($imginfo['mime'] == 'image/gif'){ $extension = ".gif"; }
/* 拡張子存在チェック */
if(!empty($extension)){
/* 画像登録処理 */
$file_tmp = $_FILES['file1']['tmp_name'];
$file_name = "sample" . $extension; // アップロード時のファイル名を設定
$file_save = "./images/" . $file_name; // アップロード対象のディレクトリを指定
move_uploaded_file($file_tmp, $file_save); // アップロード処理
echo "success"; // jquery側にレスポンス
} else {
echo "fail"; // jquery側にレスポンス
}
}
?>
クライアント側（JQuery）のバリデーションだけでは不安なので、PHP側でも必須項目のバリデーションを行います。
拡張子を含めた元ファイル名のままアップロードすることも可能ですが、その場合実際のファイル形式がわからなかったり、拡張子の記述が統一できないなどの不都合から、拡張子チェックを行い、ファイル名をプログラム側でつけることにします。
ファイル名は「sample」としていますが、こちらはデータベース側のIDを振るなどカスタマイズをするとよいでしょう。
アップロード対象フォルダも同様に変更してください。
Follow me!
投稿者プロフィール
