忍者ブログ
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。



2017/08/20 07:21 |
JavaScript2-7:jQueryで画像アップロードプレビュー

<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
<?php
    
    move_uploaded_file(
         $_FILES["img"]["tmp_name"]
        ,'/image/'.$_FILES['img']['name']);
    print('/image/'.$_FILES['img']['name']);

アップロードされたファイルを/imageフォルダにコピーし、そのファイル名をprintしてるだけです。
アップロードファイルのエラーチェックやファイル形式チェックも本来は必要ですが、どうせローカルなので一切やってません。
公開するときにはこんなことやっちゃいけません。

たったこれだけで画像プレビュー機能が追加できてしまいました。
ちなみに、プレビュー時に「削除」ボタンが出ますが、このボタンは単にプレビューを非表示にするだけで、サーバ上のファイルを消すわけではありません。
そんな機能作ってないですし。
というわけで延々プレビューを繰り返すと、そのぶんだけサーバにファイルが増えていきます。
うっかり機密ファイルを指定しちゃったからやり直した、という場合でもファイルはしっかり盗られています。
なんかに使えそう。

問題点としては、日本語ファイルが使用できません。
保存はできるのですが、表示するアドレスとして日本語が使用できません。
何の文字コードで送っても駄目なので、日本語自体アウトと思われます。
サーバ側で適当に名前を割り振る必要があります。

 

PR


2009/02/02 22:33 | Comments(0) | TrackBack(0) | JavaScript

トラックバック

トラックバックURL:

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<PHP1-50:PHPでText/Highlighterの続き | HOME | PHP1-49:PHPでcURL>>
忍者ブログ[PR]