機能が強いJSファイルのアップロードライブラリ:FilePond

6434 ワード
github javascript
本論文の著者:ハローGitHub-kalifun
これはハローGitHubの『オープンソースの説明』シリーズです.今日はJavaScriptオープンソースのファイルアップロードライブラリプロジェクトを紹介します.
紹介します
1.1 FilePond
それはJavaScriptファイルのアップロードライブラリです.アップロードファイルにドラッグ＆ドロップできます.画像を最適化してアップロードスピードをアップします.ユーザーに素晴らしい、進度が見られ、シルクのようにスムーズなユーザー体験をさせます.
FilePondプロジェクトアドレス:https://github.com/pqina/file...
1.2特徴と優勢
  • アップロード内容:サポートディレクトリ、ファイル、複数のファイル、ローカルパス、リモートURLなど.
  • ファイル管理:ファイルの削除、選択、ファイルのコピー、貼り付け、またはAPIを使用してファイルを追加します.
  • アップロード方式:AJAXを使って非同期アップロード、またはファイルをbase 64データとして符号化してフォームで送信する.
  • 画像の最適化:画像サイズの自動調整、トリミング、EXIF方向の修復.
  • 応答式:モバイルおよびデスクトップデバイス上で使用できます.
    • 効果図と機能紹介を見ましたが、手がかゆくなりましたか?続いて実戦操作部分です.文章に従ってこのライブラリを使って、あなたのファイルをアップロードしてください.
    二、実戦操作
    これからFilePondという倉庫の使い方を説明します.私達は最も簡単なCDN引用方式を採用しています.迅速に身体検査ができ、その魅力を説明します.続いて各プラグインの機能を深く説明します.最後にいくつかのプラグインを組み合わせた例と運行効果の展示を作成しました.
    Tips:説明説明は全部コードの中に注釈で展示されていますので、ご注意ください.
    2.1快速使用(CDN)
    サンプルコード:
    


    
    FilePond from CDN

    
    












  // FilePond.parse    .filepond  DOM      ，       FilePond  。
  FilePond.parse(document.body);
    展示効果:
    2.2プラグインの導入
    単純なアップロード機能が私たちのニーズを満たすことができないようです.FilePondライブラリは多様で強力なプラグイン部分を持っています.自分のニーズに応じてプラグインを選んで組み合わせて使うことができます.まず簡単にプラグインの機能を調べてみます.
  • File Rename:クライアント上のファイル
    • の名前を変更します.
  • File Ecode:ファイルをbase 64データ
    • にエンコードする.
  • File size Validation:ファイルサイズ検証ツール
  • File Type Validation:ファイルタイプ検証ツール
  • File Metadata:追加するファイルタイプを制限する
  • File Poster:ファイル項目に画像を表示する
  • Image Prview:画像ファイルのプレビューを表示する
  • Image Edit:手動で画像ファイルを編集する
  • Image Crop:画像ファイルのトリミング比を設定する
  • Image Resize:画像ファイルの出力サイズを設定する
  • Image Transform:アップロード前にクライアント上で画像変換
  • Image EXIF Orientation:EXIF方向情報抽出
  • Image Size Validation:追加する画像のサイズを制限する
  • Image Filter:色行列を画像画素
    • に適用する.
    プラグインの導入方法を紹介します.
    ピットプラグインを使う前に、必ずこのプラグインにCSSファイルがあるかどうかを確認してください.あればタグに導入してください.
    
  
  






//      FilePondPluginImagePreview                     。
FilePond.registerPlugin(FilePondPluginImagePreview);
    プラグインを導入する手順を整理します.
  • CSSファイルを導入する(一部のプラグインにCSSファイルがある)
  • JSファイルを導入する
  • 登録プラグイン
  • プラグインの設定(一部プラグインの構成が必要)
    • 2.3プラグインの配合使用
    完全な例コード:
    


    FilePond from CDN

    
    
    
    
    
    























    // querySelector()             CSS         。
    var inputElement = document.querySelector('input[type="file"]');

    //     
    // FilePondPluginImagePreview                
    // FilePondPluginImageEdit     doka  ，           。
    // FilePondPluginFileValidateType      
    // FilePondPluginImageCrop     
    // FilePondPluginFileValidateSize                    。
    FilePond.registerPlugin(
        FilePondPluginImagePreview,
        FilePondPluginImageEdit,
        FilePondPluginFileValidateSize,
        FilePondPluginImageCrop,
        FilePondPluginFileValidateType,
        FilePondPluginImageExifOrientation

    );

    FilePond.setOptions({
        //     URL              。
        server: '/upload',
        //          png    
        allowFileTypeValidation: false,
        acceptedFileTypes: "image/jpg",
        //          
        allowImageCrop: true,

        //            
        allowFileSizeValidation: true,
        maxFileSize: null,

        //        EXIF  
        allowImageExifOrientation: true

    });

    //   create             FilePond  。
    FilePond.create(inputElement)
    上記の例は、FilePond常用プラグインの方法を示しています.効果は以下の通りです.
    もちろん他の方法もあります.
  • destroys:廃棄例
  • find:追加的に提供された要素の例
    • を返す.
  • get Options:現在の構成項
    • を返します.
  • supported:ブラウザがFilePond
    • をサポートしているかどうかを識別する.
    ここでは完全な説明はしません.興味のある方は自分で試してみてください.
    三、まとめ
    以上は説明の全部です.FilePondは手軽なアップロードプラグインです.煩雑な構成は多くありません.ここでは一針ずつプラグインを導入してプレゼンテーションを行っていません.一般的な部分だけを展示しています.上に提示した穴に注意して、上で説明した方法を身につけてください.他のプラグインは自分で勉強できます.
    FilePondはとても参考になるJavaScriptライブラリです.自分のサイトにアップロード機能を早く追加したいなら、試してみてください.
    四、参考資料
  • FilePondオフィシャル文書
  • FilePond Plugins List
    • ハローGitHub公衆番号に注目して、もっと多くのオープンソースプロジェクトの資料と内容を取得してください.
    「説明開源項目シリーズ」がスタートします.オープンソースに興味がある人はもう怖くないし、オープンソースのプロジェクトの開始者は寂しくないようにします.私達の文章に従って、プログラミングの楽しみ、使用と発見がオープンソースプロジェクトに参加するのはこのように簡単です.私たちに連絡してください.多くの人がソースを愛し、貢献してくれるように投稿してください.
    JSクイック入門