dari88's diary

これから趣味にするプログラミング/PHP/javascript/kohana/CMS/web design/

PHPでファイルをまとめてアップロード・・・jQueryのプラグインUploadifyを使う

PHP jQuery

今日もNetBeansにて「PHP逆引きレシピ」のサンプルコードを教材にPHPの勉強を進めています。

今日のお題は第6章6.6「ファイルアップロード」です。サンプルコード 02.php で複数の画像ファイルをアップロード出来ることは出来るんですけど、気に入りません。何枚でも写真を投稿できるサイトを作ろうと思ったら、これでは役不足です。そこで何か良い手はないかと調べてみたら、Uploadify という jQuery のプラグインを発見しました。そもそも jQuery なんてのも初めて聞くわけなんですけど、結論から言うとえらく簡単に実装出来ました。

ファイルをナンボでも纏めてアップロード出来るし、見た目もえらくカッコイイです。ということで、実装手順をメモしておきます。

＜実装手順＞
・Uploadifyのサイトから最新版をダウンロードする。
・解凍して出来たファイル群を xampp/htdocs/uploadify/ の下に配置する。
・xampp/htdocs/uploads/ フォルダを作る。
・NetBeans にてサンプルコード 02.php を右クリック・コピーして、上の 06 フォルダにペーストする。
・コピーされた 02_1.php を開き、中身を下記内容に入れ替える。
・オプションの説明はサイトの documentation に書いてある。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="/uploadify/swfobject.js"></script>
        <script type="text/javascript" src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
        <script type="text/javascript">
            // <![CDATA[
            $(document).ready(function() {
                $('#file_upload').uploadify({
                    'uploader'  : '/uploadify/uploadify.swf',
                    'script'    : '/uploadify/uploadify.php',
                    'cancelImg' : '/uploadify/cancel.png',
                    'folder'    : '/uploads',
                    'queueID'   : 'queue',
                    'fileExt'   : '*.jpg;*.gif;*.png',
                    'fileDesc'  : 'Image Files',
                    'sizeLimit' : 1024000,
                    'multi'     : true,
                    'auto'      : false
                });
            });
            // ]]>
        </script>
        <title>Uploadifyを使って複数の画像をアップロードさせたい</title>
    </head>
    <body>
        <a>ファイルをアップロードして下さい</a>
        <div style="background-color: #505050; height: 200px; margin-bottom: 10px; 
             padding:10px; overflow: auto; width: 400px;" id="queue"></div>
        <input type="file" id="file_upload" name="file_upload" /><br />
        <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>
    </body>
</html>

・でもって実行すると、素晴らしい！
・しかし、漢字を使ったファイル名のファイルは文字化けします。対策としては uploadify/uploadify.php の一文を次のように書き換えます。

        $filename = mb_convert_encoding($_FILES['Filedata']['name'],'SJIS');
        $targetFile =  str_replace('//','/',$targetPath) . $filename;

 簡単に実装できてとてもいいんですけど、uploadify.php を見ての通りセキュリティー対策は殆どなされていません。ハッカーならどんなファイルでもアップロードできちゃいますので、02.php を見習って uploadify.php を相当いじる必要がありあます。

尤も、実際の公開サイトではアップロードされた写真などはデータベースに保存するように設計するでしょうから、どのみち uploadify.php に手を入れるんだと思います。