EasyDropzoneJS
EasyDropzoneJSは既存のフォームに簡単にドラッグ&ドロップによるファイルアップローダーを設置できるシンプルなJavaScriptライブラリです。
非依存で使い方もシンプルなので、既存のフォームに簡単に組み込めると思います。
< link href = "default.css" rel = "stylesheet" /> < script src = "easydropzone.js" ></ script > |
👆 CSSとライブラリを読み込みます。
< div id = "exampleDropzone" > < input name = "file" type = "file" accept = "image/png, image/jpg, image/jpeg" /> </ div > |
👆 アップロード要素を用意します。
new EasyDropzone( 'exampleDropzone' ); |
👆 要素を指定すれば動作します。
const dropzoneDefaults = { clickText: "or click here" , dragText: "Drag a file here" , numFilesErrorMessage: "Only one file is allowed" , numFilesErrorFunction: function (errorMessage) { alert(errorMessage); }, invalidFileTypeErrorMessage: "Invalid file type" , invalidFileTypeErrorFunction: function (errorMessage) { alert(errorMessage); }, imagePreview: true , } |
👆 オプションとして上記が用意されています。
var config = { clickText: "又はクリックで選択" , dragText: "ここに画像をドラッグしてアップロード" , } new EasyDropzone( 'exampleDropzone' , config); |
👆 変更内容は配列にして初期化コードに代入すれば変更内容が反映されます。
とても簡単ですね。コードはGitlabで公開されています。ライセンスはApache2.0との事です。