[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가 나올 때의 해결 방법
Reference
이 문제에 관하여([jQuery] 플러그인으로 이미지 업로드 UI를 쉽게 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/dai_designing/items/349bf76a0cd55e80efff
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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가 나올 때의 해결 방법
Reference
이 문제에 관하여([jQuery] 플러그인으로 이미지 업로드 UI를 쉽게 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/dai_designing/items/349bf76a0cd55e80efff
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!--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를 넣어야하므로 여기를 참조하십시오.
laravel5.6에서 jQuery를 사용하려고하면 Uncaught ReferenceError : $ is not defined가 나올 때의 해결 방법
Reference
이 문제에 관하여([jQuery] 플러그인으로 이미지 업로드 UI를 쉽게 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/dai_designing/items/349bf76a0cd55e80efff텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)