富山のホームページ製作会社・グリーク スタッフブログ - ブログ -
  1. グリークトップ
  2. web制作
  3. ブログ

jqueryでファイルアップロードにオススメなプラグイン「jQuery-File-Upload」

こんにちわ。
プログラマの湊です。

今回は、jqueryでファイルアップロードにオススメなプラグイン「jQuery-File-Upload」をご紹介いたします。
今まで使用した中でも、抜群のカスタマイズ性があるのでオススメですよ☆

 

screen

ダウンロード

ソースコードはGithubに上がっております。

https://github.com/blueimp/jQuery-File-Upload

デモページはこちらから

 

使い方

指定のJS,CSSファイルを下記のように読み込み、呼び出してあげるだけでOK。

僕の場合は、composerを利用し、アップデートを楽にしております。(composerについてはまた別の機会に)

bootstrapにも対応しておりますので、簡単にスタイル設定されます。

jqueryベースですので、jqueryは読み込んであげて下さい。(コードはサンプルのものを抜粋しております。)

 


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>

<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = window.location.hostname === 'blueimp.github.io' ?
                '//jquery-file-upload.appspot.com/' : 'server/php/';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>

 

 

jQuery-File-Uploadのすごいところ その1.
サーバーサイドのサンプルが豊富

ダウンロードしたファイルに「server」というフォルダがありますが、

その中でサーバーサイドのプログラムがそろっております。(php、node.jsなど)

phpしか使ったことがありませんが、内部のプログラムを見るとオプションも豊富です。

さらにクラスかしてありますので、extendで継承してあげるといろいろ設定は変えれます。

自分の場合は、アップロードされるファイル名がデフォルトで元ファイル名になってしまうので、ユニークな名前に変えております。


class myUploadHandler extend UploadHandler{
    protected function get_unique_filename($file_path, $name, $size, $type, $error,
      $index, $content_range) {
    $ext = "";
    if(preg_match('/^(.+)\.(.+)$/',$name,$matchs)){
      $ext = ".".$matchs[2];
    }
    $name = uniqid().ext;
    return $name;
  }
}
$upload_handler = new myUploadHandler();

 

jQuery-File-Uploadのすごいところ その2.
高度なカスタマイズが可能

とにかく、サーバーサイド・JS側でのオプションが豊富です。

ほぼそのままでも動きますが、ちょっと仕様変更したい場合でも大抵のものだと変えることができます。

 

jQuery-File-Uploadのすごいところ その3.
複数ファイル・ドラックアンドドロップのアップロードにも対応

デフォルトで既に設定されておりますが、ドラックアンドドロップの機能にも対応しております。(初期値は画面全体)

コールバック関数もオプションで用意されているので、見た目を変更することも可能です。

 

jQuery-File-Uploadのすごいところ その4.
高度なフィルタリング

場合によっては、PNGやJPEGなどといった画像ファイルのみ、

テキストファイルのみをアップロードしたいこともありますが、正規表現によってフィルターをかけることも可能です。

画像ファイルの場合、初期設定でサムネイル画像まで生成されます。

 

とにかくオプションが豊富すぎて、僕自身も把握し切れません!

残念なことに英語での解説しかないため、下記ドキュメントをしっかり読んでいくとカスタマイズしやすいかと思います。

https://github.com/blueimp/jQuery-File-Upload/wiki

 

もうひとつ残念なのが、IEは10以降でしか対応していないため、ブラウザが少し限られてくるということ。

しっかり対応ブラウザをチェックし、問題なければ後悔はしないとおもいますよ!

 

 

この記事を書いたスタッフ