• かちびと.net

    HTML5+jQueryのドラッグ&ドロップに対応したアップローダー・dropareaのご紹介。ローカルからドラッグだけでWebに画像をアップロード出来ます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

HTML5+jQueryのドラッグ&ドロップに対応したアップローダー・droparea

スポンサーリンク

Gmailライクにローカル環境からブラウザに
ドラッグ&ドロップで画像をアップロード可能
にするHTML5+jQuery製のアップローダー
droparea。今後、こうしてキーボードを使う
頻度が減っていくんですかね・・HTML5の
出現で一気に加速した印象ですね。

jQuery HTML5 UploaderjQuery File Uploadの後発に当たりますね。

droparea


イメージアップローダーです。Gmailライクにドラッグ&ドロップでアップロード出来ます。

コード

        s = {
            'init': m.init,
            'start': m.start,
            'complete': m.complete,
            'instructions': 'drop an image file here',
            'over'        : 'drop file here!',
            'nosupport'   : 'No support for the File API in this web browser',
            'noimage'     : 'Unsupported file type!',
            'uploaded'    : 'Uploaded',
            'maxsize'     : '500', //Kb
            'post'        : 'upload.php'
        };

jQueryプラグイン内でテキストやサイズを制御できます。

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

                $('.droparea').droparea({
                    'post' : 'upload.php',
                    'init' : function(r){
                        //console.log('my init',r);
                    },
                    'start' : function(r){
                        //console.log('my start',r);
                    },
                    'error' : function(r){
                        //console.log('my error',r);
                    },
                    'complete' : function(r){
                        //console.log('my complete',r);
                    }
                });
            </script>

同梱されてるphpファイルを読み込む。

jQueryプラグインと一緒に、PHPファイルも同梱されてるのですぐに動作テストできます。

droparea

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services