[Vue] ファイルアップロード&バリデーション ( use bootstrap-vue )

See the Pen
vue.js(bootstrap-vue) File Upload
by Tenderfeel (@Tenderfeel)
on CodePen.

なんでか初回はonchangeが反応しない挙動があった。
プレビュー表示ならwatchでv-model監視する手もあるな🤔と思った。

draganddropの判別にmodernizr使おうとしたら存在しなかったんだけど消えたんですかね。
ないものは仕方ないからisMobileでPCだけドラッグドロップUIになるようにしてます。

“[Vue] ファイルアップロード&バリデーション ( use bootstrap-vue )” の続きを読む

[js] 画像をDataURLに変換するツール

中身はDrag&Drop + File API なので何番煎じなんだか分からないけれども…

ブックマークするならこちら

できること

  • 画像ファイルをドラッグ&ドロップで変換実行
  • 変換1回あたりの枚数制限なし(PCスペック依存)
  • imgタグ作成
  • 50%縮小オプション(小数点以下切り捨て)

複数の画像を一括でDataURLに変換するのと、
画像タグを生成してくれるものが無かったので自分で作った。
スタイリングはBootstrapです。

MooToolsで未定義の新しいイベントを使う時には
Element.NativeEventsで設定するとaddEventとかで使えるようになります。

Element.NativeEvents['drop'] = 2;
Element.NativeEvents['dragover'] = 2;
Element.NativeEvents['dragleave'] = 2;