ファイルをまとめてアップロードする jQuery のプラグイン「Uploadify」の使い方。
2015/03/28
画像ファイルを複数枚一気にアップロード出来ないかと探していましたら「Uploadify」というjQueryのプラグインを発見しましたので、その設置方法を忘備録代わりにポストです。
「Uploadify」とは？
以下のサイトで公開されているスクリプトです。
現時点で、無料のFlashバージョンと有料（US 5ドル）のHTML5バージョンが公開されています。
HTML5 File Upload Script, jQuery Multiple File Upload Plugin - Uploadify / UploadiFive - Uploadify
デモの動画を見ると、どんなものかすぐ解ると思うので、まずは見ることをオススメ。
FLASH版をダウンロードします。
この記事を書いた時点で、バージョンは 3.2 です。
「Uploadify」の設置
【設置構成】
|
1 2 3 4 5 |
[www] ├［js］ ←ライブラリ用フォルダ │ └[uploadify] ←本体 ├[uploads] ←アップロード用フォルダ └index.php ←フォーム |
上記構成で説明します。
ダウンロード
以下URLよりダウンロードします。
Download Uploadify - Uploadify
書庫ファイルを展開して、 /js/uploadify/ に設置。
js と同階層にアップロード用のフォルダ uploads を作成します。パーミッションは707とか777で。
ちなみにフォルダ名は任意です。同梱の uploadify.php にて設定可能です。
/index.php
アップローダを設置するメインとなる index.php の説明。
内容はほとんど同梱されている index.php そのままです。
各ファイルへのパスと、フォームのID名をjavascriptのコードにあるセレクタ名と合わせてばOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Uploadify Demo</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="/js/uploadify/jquery.uploadify.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="/js/uploadify/uploadify.css"> </head> <body> <h1>Uploadify Demo</h1> <form> <div id="queue" style="background-color: #505050; height: 200px; margin-bottom: 10px; padding:10px; overflow: auto; width: 400px;"></div> <input id="file_upload" name="file_upload" type="file" multiple="true"> </form> <script type="text/javascript"> <?php $timestamp = time();?> $(function() { $('#file_upload').uploadify({ 'formData' : { 'timestamp' : '<?php echo $timestamp;?>', 'token' : '<?php echo md5('unique_salt' . $timestamp);?>' }, 'swf' : '/js/uploadify/uploadify.swf', 'uploader' : '/js/uploadify/uploadify.php' 'queueID' : 'queue', 'fileTypeDesc' : 'Image Files', 'fileTypeExts' : '*.gif; *.jpg; *.png', }); }); </script> </body> </html> |
色々とオプションがありますが、swfとuploaderが必須。
formDataで送信している「timestamp」「token」は、/js/uploadify/uploadify.php 内で判定として使用しているので、設定。
queueIDは、アップロードしているファイルの進行状況がわかるので設定します。
fileTypeDescは、よく分かりませんでした（おい）
fileTypeExtsは、ファイル選択時に画像のみにしてくれるので設定してみました。
/js/uploadify/uploadify.php
「$targetFolder」に、先ほど作成したアップロード先のフォルダ名を設定します。
デフォルト
|
1 |
$targetFolder = '/uploads'; // Relative to the root |
変更する場合はこんな感じで。変更した場合は、アップフォルダを作成して下さい。
|
1 |
$targetFolder = '/media/img'; // Relative to the root |
などでも構いません。
パーミッションを 777 とか、707 などにするのを忘れずに。
日本語を使った画像をアップするとファイル名が文字化けするので、/js/uploadify/uploadify.php をちょっといじります。
と言っても、日本語のファイルをそのままアップロードすることなんて無いとは思いますがｗ
|
1 2 3 4 5 6 |
//$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name']; ↓↓↓ $filename = mb_convert_encoding($_FILES['Filedata']['name'], "SJIS", "auto"); $targetFile = rtrim($targetPath,'/') . '/' . $filename; |
一応、これで出来上がりです。
単にアップロードするだけならあっという間に完成しますが、CakePHPで使おうと思ったので手を入れてみました。
詳細は次のポストで。
jQuery のプラグイン「Uploadify」をCakePHPで使ってみる
https://nodoame.net/archives/3373
[tgAmazonItemLookup asin="4150311048" related="1"]