勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

Ajaxで画像のアップロード(jquery.upload)

      2014/07/03

業務中に画像の選択後、アップロードボタンを押して画像のアップ、
その後フォームの送信というものがあった。

中身を見てみるとjquery.uploadというjqueryプラグインを使用しており、
これがなんともお手軽にアップロードできていた。

■参考元
http://symfoware.blog68.fc2.com/blog-entry-864.html

■プラグインダウンロード
http://lagoscript.org/jquery/upload/download?locale=ja

■HTML

#upload_buttonをクリックした際に、#file_idに選択されている

画像をupload.phpに送信する、という内容になっている。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transtional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html"/>
<meta cherset = "UTF-8">
<html lang="ja">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="upload.js"></script>
<script type="text/javascript">
$(function() {
$('#upload_button').click(function() {
$('#file_id').upload('upload.php', function(res) {
$(res).insertAfter(this);
}, 'html');
});
});
</script>
<title>画像アップロードテスト</title>
</head>
<body>
<h1>画像アップロードテスト</h1>
<input type="file" name="upload_file" id="file_id"></br>
<input type="button" value="upload" id="upload_button">
</body>
</html>

PHP
<?php
define('FILE_PATH','aaa/bbb/html_img/');
if (!is_uploaded_file( $_FILES['upload_file']['tmp_name'])) {
echo '<div>ファイルが選択されていません。</div>';
exit();
}
move_uploaded_file($_FILES["upload_file"]["tmp_name"], FILE_PATH . $_FILES["upload_file"]["name"]);
echo '<div>'.$_FILES["upload_file"]["name"].'をアップロードしました</div>';

■その他
画像以外にデータも引き渡す事が出来る
↓↓の例だとcode=111を送信している。

var tmp_code = 111;
if($("#Image1").val()){
$("#Image1").upload("./upload.php",{code:tmp_code});
}

登録フォームとかで先にcodeを割り振っておいて、

codeを用いて画像の名前を生成するとかに使える。

難儀な点は複数ファイルを一発で送ることが出来ない事。
一枚ずつ送ることは可能。

BBSとか内容と画像をいっぺんに送りたい時はPHP
遷移させず画像を先にアップロードしてからその他の内容を
送りたい時にjquery.uploadを使用する。

 - Ajax, jQuery, 画像

  関連記事

images
画像をURLから取得して異なるサーバーにアップロード

■やりたかった事 ・画像があるサーバーはaaaサーバー ・アップロード先はbbb ...

jquery_logo
スクロールしてもついてくる追尾型の広告を作る方法

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...

images
独自タグを変換して画像を表示させる

やりたい事↓↓ ----- {$IMG1}~{$IMG5}までの独自タグがある。 ...

jquery_logo
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...

images
登録画像orノーイメージ画像の振り分け表示

<? /* 画像が登録されていれば当該画像を読み出し、 登録されていない場 ...

jquery_logo
Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...

jquery_logo
jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...

images
ImageMagickについて

画像をSSH経由でリサイズする必要があった。 その際に「コンバートがいいよ」とい ...

jquery_logo
jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

jquery_logo
jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...