<input type="file">でどの画像を指定したのかわからなくなった、うっかり違うファイルをアップロードしてしまった、なんてことはよくあると思いますが、それを防ぐために確認画面を用意しているサイトもあります。
ただ個人的に確認画面要らないと思うのですがどうでしょう。
というわけで画面遷移せずに指定した画像をプレビューできるjQueryプラグインを見つけたので使ってみます。
jQuery.autouploader 1.0.1
http://tech.kayac.com/archive/jquery-autouploader-plugin.html
使い方は簡単。
適当な引数付けて<script src>で呼ぶだけというお手軽さです。
とりあえず作ってみましょう。
jquery_index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!--
jquery.autouploader.jsを呼び出すときに、srcに引数を入れる
api=/api/image/set
サーバ上の処理プログラムのURL
send_name=img
送信する画像ファイル名
loading=''
ロード中別の画像を表示する場合
no_exec=''
trueにすると自動プレビュー無効
その場合は↓のように手動で呼び出す
$(function(){$('form[enctype="multipart/form-data"]').autouploader();});
-->
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src=
"./jquery.autouploader.js#api=./jquery_api.php&send_name=img">
</script>
<form method="POST" action="./jquery_submit.php" enctype="multipart/form-data">
<input type="file" name="data"><br /><br />
<input type="submit" name="submit"></form>
|
#api=./jquery_api.php&send_name=img
という形で呼び出しています。
これは、サーバ側で画像ファイルの処理を行うのが./jquery_api.phpで、$_FILESの名前となるのがimgということです。
デフォルトがimgで、<input type="file">のname属性は無視されます。
本来、フォームは
<input type="submit">
ボタンを押した時点で送信されますが、今回は画像ファイルを指定して「開く」を押した時点でjQueryがそれを察知し、jquery.autouploader.jsがそのファイルを取得して送信します。
送信先のURLで行うなことは、送信されてきた画像を適切に保存することと、その画像のURLを返すことです。
jquery_api.php
1
2
3
4
5
6
|
move_uploaded_file(
$_FILES["img"]["tmp_name"]
,'/image/'.$_FILES['img']['name']);
print('/image/'.$_FILES['img']['name']);
|
アップロードされたファイルを/imageフォルダにコピーし、そのファイル名をprintしてるだけです。
アップロードファイルのエラーチェックやファイル形式チェックも本来は必要ですが、どうせローカルなので一切やってません。
公開するときにはこんなことやっちゃいけません。
たったこれだけで画像プレビュー機能が追加できてしまいました。
ちなみに、プレビュー時に「削除」ボタンが出ますが、このボタンは単にプレビューを非表示にするだけで、サーバ上のファイルを消すわけではありません。
そんな機能作ってないですし。
というわけで延々プレビューを繰り返すと、そのぶんだけサーバにファイルが増えていきます。
うっかり機密ファイルを指定しちゃったからやり直した、という場合でもファイルはしっかり盗られています。
なんかに使えそう。
問題点としては、日本語ファイルが使用できません。
保存はできるのですが、表示するアドレスとして日本語が使用できません。
何の文字コードで送っても駄目なので、日本語自体アウトと思われます。
サーバ側で適当に名前を割り振る必要があります。
PR
トラックバック
トラックバックURL:
