jQuery ファイルアップローダー Dropify

ダウンロード

https://github.com/JeremyFagis/dropify
から以下をダウンロードして保存
・dropify.js
・dropify.css
・fontsディレクトリ

設定

・jQueryライブラリ読み込み
・dropify.css読み込み
・dropify.js読み込み

html

File要素を作成。class属性にdropifyを設定

<input type="file" name="〜" class="dropify" accept="image/*" data-height="300">

JavaScript

実行


$(function(){
 $('.dropify').dropify();
});

画像追加イベント


$(function(){
 $('.dropify').on('change', function() {
  画像データ
  const pic = $('.dropify').prop("files")[0];
 }
});

画像削除イベント


$(function(){
 $('.dropify').on('dropify.afterClear', function(event, element) {

 }
});

Follow me!