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) {

　}
});