ファイルをまとめてアップロードする 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】下方へスクロールしたらトップへ戻るボタンを表示して、スムーズにページトップへ帰るスクリプトを組んでみた

下スクロールでふわっと表示させ、クリックすると上部へスルスルっと戻って消えるというスクリプトを組んでみました。戻るボタンもテキストではなく画像にし、ファイル名末尾に「_on」をつけた画像で差し替えも行なっています。

: 半角英数から全角英数へなど、文字を変換するスクリプトをjQueryを使って組んでみた。

郵便局サイトの住所を入れる際、地番を入れる欄にて「全角数字を使え」という旨のエラーが出ました。
何でわざわざ全角で数字？漢数字ならまだしも、半角数字で入力されている場合はフロントエンドでなんとでもなるだろう。

: 【JS】ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで作成する

ラジオボタンの選択値によって指定したテーブルのTRタグ（無論DIVでも）の表示・非表示を変更し、内容を操作するJavascript（jQuery）の紹介です。

: 「クリックしたらツールチップを表示するスクリプト」のバージョン2を作ってみた

以前作成した「クリックしたらツールチップを表示するスクリプト」がQiitaでいい感じに改造されていたのに影響を受け、もう少しだけ上手に書いた(と思う) バージョン2がようやく出来上がったので晒してみたいと思います。

: Javascriptでの配列の作成方法

Javascriptでの配列の作り方を整理します。

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

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

「Uploadify」とは？

「Uploadify」の設置

ダウンロード

/index.php

/js/uploadify/uploadify.php

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

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

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

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

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

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