[jQuery] プラグインで画像アップロードUIを簡単実装

2830 ワード
デザイン jQuery プラグイン UI UI テキストリンク

実装するもの

Demo: codepen
※デモファイルではアイコン部分FontAwsomeにしています

必要なプラグイン

dropify
ダウンロード後「dist」フォルダ内のjs、cssファイルを取る

手順

<!--jQuery読み込み-->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<!--プラグインデータ読み込み-->
<link rel="stylesheet" type="text/css" href="css/dropify.css">
<script src="js/dropify.js"></script>
...
<form>
    <!--dropifyクラスが適用される-->
    <input type="file" class="dropify" name="file">
</form>
...
<script>
    // プラグイン読み込み
    $(document).ready(function(){
        $('.dropify').dropify();
    });
</script>

たったのこれだけで、ドラッグ＆ドロップできるUIが作れてしまいます。
「js/dropify.js」や「css/dropify.css」も自由にいじれるので
カスタマイズも簡単に行うことができるので非常に便利です。

Laravelに導入したい場合

jQueryを入れる必要があるので、こちらの記事を参照

laravel5.6でjQueryを使おうとすると、Uncaught ReferenceError: $ is not definedが出る時の対処方法