ファイルをまとめてアップロードする jQuery のプラグイン「Uploadify」の使い方。

2013/05/27 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」の設置

【設置構成】

[www]
 ├［js］          ←ライブラリ用フォルダ
 │ └[uploadify]  ←本体
 ├[uploads]      ←アップロード用フォルダ
 └index.php      ←フォーム

[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です。

<!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>

<!DOCTYPE HTML>

<html>

<head>

<title>Uploadify Demo</title>

</head>

<body>

<h1>Uploadify Demo</h1>

<form>

</form>

<?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」に、先ほど作成したアップロード先のフォルダ名を設定します。

デフォルト

$targetFolder = '/uploads'; // Relative to the root

1	$targetFolder = '/uploads'; // Relative to the root

変更する場合はこんな感じで。変更した場合は、アップフォルダを作成して下さい。

$targetFolder = '/media/img'; // Relative to the root

1	$targetFolder = '/media/img'; // Relative to the root

などでも構いません。
パーミッションを 777 とか、707 などにするのを忘れずに。

日本語を使った画像をアップするとファイル名が文字化けするので、/js/uploadify/uploadify.php をちょっといじります。
と言っても、日本語のファイルをそのままアップロードすることなんて無いとは思いますがｗ

    //$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];

	↓↓↓

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

//$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"]

-Javascript,jQuery
-javascript, jquery, js, php, Uploadify, 一括アップロード

: 【jQuery】台湾ドル to 日本円コンバータを作ってみた

前回のポストネタであるJSONP取得を使い、台湾ドルの為替レートAPIを利用して ...

: 【JS】ラジオボタンでブロックの開閉を制御するスクリプトをjQueryで組んでみた

大きいブロックが十数個並ぶようなページで、それぞれのブロックの頭にラジオボタンを置き、その選択値によってブロックを開閉するスクリプトが必要になったので、例によってjQueryで組んでみました。

: 【jQuery】時刻の入力補助スクリプト jquery.tgClockPickTip2 を作ってみた

以前、時刻の入力補助ライブラリを紹介しましたが、さらに使いやすいライブラリ「jQuery UI Time Picker by Francois Gelinas」を発見。その完成度の高さに感動し「ソースを見ないで同じものを作ってみよう！」と練習の意味も込めて、どこまで近づけるか力試しをしてみました。

: 【jQuery】タブの切替スクリプトを作成してみました

jQueryの練習で何かを作ってみようということで、yahooトップページのトピックスに使われているような、タブの切替を作ってみました。

: 【jQuery】フォームの値を取得 / チェックするスクリプト

jQueryを使い、フォーム内容が埋まっているか、選択されているかなどをチェックする方法のメモ。

PREV: ミルクで仕上げた"甘くない"カフェオレスタイルのコーヒー「LUANA ルアーナ」を飲んでみた。
NEXT: 複数ファイルをアップロードできるjQueryのプラグイン「Uploadify」をCakePHPで使ってみる

ファイルをまとめてアップロードする jQuery のプラグイン「Uploadify」の使い方。

「Uploadify」とは？

「Uploadify」の設置

ダウンロード

/index.php

/js/uploadify/uploadify.php

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,167)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,489)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (254,925)

【歴史】江戸幕府歴代将軍一覧 (142,957)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,868)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (127,930)