ブラウザから複数のファイルをアップロードしたい場合

フォーム開発をしていると、稀にファイルのアップロードの必要性が発生し、
かつ同時にいくつものファイルをアップしたい。と言われる事がある。

そのような時はjQueryのuploadifyを使用するとよい。
http://www.uploadify.com/

これを使うと、上記にニーズがあっさり解決される。

設置方法はリンク先を参照すればいいと思うが、
・画像の保存用ディレクトリをサーバに準備
・アップロード用HTMLのヘッダ部で

<script language="javascript" src="js/jquery.uploadify/jquery-1.3.2.min.js"></script>
<script language="javascript" src="js/jquery.uploadify/swfobject.js"></script>
<script language="javascript" src="js/jquery.uploadify/jquery.uploadify.v2.1.0.js"></script>

というように宣言


・アップするボタンを用意


<input type="file" name="fileInput1" id="fileInput1" />
<a href="javascript:$('#fileInput1').uploadifyUpload();">アップロード</a>
<div id="fileQueue" style="width:300px;height:250px;border:1px solid #E5E5E5;padding: 0;overflow:auto;margin-bottom: 10px;"< </div>
<script type="text/javascript">
$(document).ready(function() {
$('#fileInput1').uploadify({
'uploader':'js/jquery.uploadify/uploadify.swf',
'script':'js/jquery.uploadify/uploadify.php',
'cancelImg':'js/jquery.uploadify/cancel.png',
'folder':'uploaddir',
'queueID':'fileQueue',
'multi':true
});
});
</script>


※folderに作成したディレクトリパス(画像のアップ先)


でOK。
その他にもいろいろオプションがあるので、詳細はやっぱりリンク先を。


コメントをどうぞ