The Diary of Aska

jQuery-File-Upload Snippet

jQuery-File-Upload の標準のサンプルはUI付きだがアップロードさえ出来れば良いならjQueryjquery.fileupload.jsだけで事足りる。

dropZoneをform要素外に置けばform要素自体hideしてしまって構わない、レガシーブラウザをサポートしないならそういう選択肢もある。

Js

$('#file_upload').fileUpload({
    dropZone: $('body'), // ドロップゾーンを要素で指定
    onLoadAll: function(){
        // 完了のメッセージなり画面の再描画なりする
    }
});

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.fileupload.js"></script>

<form id="file_upload" action="upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file[]" multiple>
<button>upload</button>
</form>

Server Side (Perl/Plack)

my @uploads = $req->upload("file[]");