File

Fileのモジュール

詳しい導入事例は導入方法を参照してください。

  • DEMO
  • 複数アップロード
  • ラベル表示

ファイルアップロード

画像アップロード

使い方

JSで使用するので+-.form-wrap-+に[file]か[img]のクラス必須。
+-label-+の[Name]も追加できますが、仕様上つけれるだけなので非推薦です。

複数アップロードの場合は*-input-*に[multiple]を追加。

  • HTML

  

    
    

      
ファイルアップロード

      

    

  

  
  
  

    
    

      
画像アップロード

必須設定

+-.form-wrap-+に+-.req-+クラス追加でrequirednの設定になります。
*-input-*にはJSでrequiredを追加します。

  • DEMO

画像プレビュー

*-img-*の場合、+-.form-wrap-+に[preview]のクラスを追加することで添付画像がプレビューされるます。

表示位置の変更や既アップの画像表示等は別途指定してください。

  • DEMO

自動生成用コード

上記のややこしいHTMLをScriptで自動生成します

設置したい場所に下記の*-input-*を設置して、任意の値を入れてください。

  • HTML

  <input class="dataset-fileup"
    data-id=""
    name=""
    data-accept=""
    data-multiple=""
    data-title=""
    data-dsc=""
    data-class=""
  type="hidden">
  
  
  <input class="dataset-imgup"
    data-id=""
    name=""
    data-accept=""
    data-multiple=""
    data-title=""
    data-dsc=""
    data-class=""
  type="hidden">
  • [data-id] id属性を指定
  • [name] name属性を指定
  • [data-accept] accept属性を指定
  • [data-multiple] multiple属性を指定：なにかしら入力があれば設定します。
  • [data-title] ボタンの名称
  • [data-dsc] 説明文指定
  • [data-class] オプション用のクラスやオリジナルのクラス指定

使用しない属性は削除可能。