[jQuery] 플러그인으로 이미지 업로드 UI를 쉽게 구현

구현하는 것





하지만 : 코데 펜
※데모 파일에서는 아이콘 부분 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」도 자유롭게 꼬집기 때문에
사용자 정의도 쉽게 할 수 있기 때문에 매우 편리합니다.

라라벨에 도입하고 싶다면



jQuery를 넣어야하므로 여기를 참조하십시오.

laravel5.6에서 jQuery를 사용하려고하면 Uncaught ReferenceError : $ is not defined가 나올 때의 해결 방법

좋은 웹페이지 즐겨찾기