[jQuery] プラグインで画像アップロード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>
<!--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が出る時の対処方法
Author And Source
この問題について([jQuery] プラグインで画像アップロードUIを簡単実装), 我々は、より多くの情報をここで見つけました https://qiita.com/dai_designing/items/349bf76a0cd55e80efff著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .