jQueryを使用してドラッグ&ドロップでファイルをアップロードできる「Plupload」


Plupload
Pluploadはオープンソースのファイルアップローダーで、jQueryを使用してファイルのアップロードやリサイズ処理を行う事が可能になっています。

アップロードには複数のプラットフォームから選択可能で、FlashやSilverlightを使用する事も可能。

作者はTinyMCEの開発者の方だそうです。これは期待できますね。

詳しくは以下

IT/WEB業界への転職なら求人サイトGreen

機能

Plupload2
各テクノロジーについて何ができるかは、表にまとめられています。HTML5はJavaScriptだけで画像のリサイズなんかもできちゃうんですね。

以下のような機能があるようです。

  • 複数ファイルのアップロード
  • アップロード進捗状況の表示
  • 最大ファイルサイズの制限
  • 画像のサイズを変更する
  • ユニークなファイル名の指定

複数ファイルのアップロード処理はCMSでは必須なので、こういったライブラリがオープンソースで公開されるのは開発者には嬉しいですね。

ソースも割とシンプルにできていると思います。これだけで設置できちゃうのはすごいです。

<style type="text/css">@import url(css/plupload.queue.css);</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
</script>
<!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->
<script type="text/javascript" src="/plupload/js/gears_init.js"></script>
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
<!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->
<script type="text/javascript" src="/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="/plupload/js/jquery.plupload.queue.min.js"></script>
<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$().ready(function() {
$("#uploader").pluploadQueue({
// General settings
runtimes : 'gears,flash,silverlight,browserplus,html5',
url : 'upload.php',
max_file_size : '10mb',
chunk_size : '1mb',
unique_names : true,
// Resize images on clientside if we can
resize : {width : 320, height : 240, quality : 90},
// Specify what files to browse for
filters : [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
],
// Flash settings
flash_swf_url : 'swfファイルへのパス',
// Silverlight settings
silverlight_xap_url : 'xapファイルへのパス'
});
// Client side form validation
$('form').submit(function(e) {
var uploader = $('#uploader').pluploadQueue();
// Validate number of uploaded files
if (uploader.total.uploaded == 0) {
alert('You must at least upload one file.');
e.preventDefault();
}
});
});
</script>
...

You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.

サイトにはデモがあるので、興味のある方は使ってみてください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly