jQuery06 - 이미지 슬라이더, 텍스트 에디터, 파일 업로드

Notice

Recent Posts

Recent Comments

Link

« 2024/06 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Tags more

Archives

Today

Total

관리 메뉴

코딩 노트

jQuery06 - 이미지 슬라이더, 텍스트 에디터, 파일 업로드 본문

jQuery

jQuery06 - 이미지 슬라이더, 텍스트 에디터, 파일 업로드

newbyeol 2023. 9. 13. 11:11

maven은 프로젝트를 세팅해놓으면 거기에 맞게 빌드업해주는 것

NPM도 마찬가지

<!DOCTYPE html>

<head>

<style>

:root {

--swiper-theme-color: #2c8de0

}

.swiper {

width: 100%;

height: 300px;

}

</style>

$(function(){

var swiper = new Swiper('.swiper', {

// Optional parameters

// direction: 'vertical', //슬라이드 방향

loop: true, //슬라이드의 순환 설정

// If we need pagination

pagination: {

el: '.swiper-pagination', //적용할 영역, 요소, 태그

type: 'bullets', //페이지네이션의 유형 (progressbar/bullets/fraction)

clickable:true, //페이지네이션 클릭가능여부

// Navigation arrows 이동 화살표

navigation: { //스와이퍼를 한 페이지에 여러 개 쓸 때 제대로된 타겟팅을 위한 지정

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

hideOnClick: true, //클릭 시 숨김 처리 여부

// And if we need scrollbar 스크롤바

// scrollbar: {

// el: '.swiper-scrollbar',

// },

// 자동재생

autoplay: {

delay: 2000,//재생간격(ms)

pauseOnMouseEnter:true, //마우스 진입 시 멈춤 여부

//이펙트(페이지 전환 효과) 설정

effect: "slide", //(slide/fade/cube/coverflow/flip/creative/cards)

});

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

51.text-editor.html

<head>

<title>without bootstrap</title>

</head>

<body>

$('#summernote').summernote({

placeholder: 'Hello stand alone ui',

tabsize: 2,

height: 120,

toolbar: [

['style', ['style']],

['font', ['bold', 'underline', 'clear']],

['color', ['color']],

['para', ['ul', 'ol', 'paragraph']],

['table', ['table']],

['insert', ['link', 'picture', 'video']],

['view', ['fullscreen', 'codeview', 'help']]

]

});

</script>

</body>

</html>

52.text-editor.html

<!DOCTYPE html>

<head>

<title>Rich Text Editor</title>

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<style>

</style>

$(function () {

$('[name=boardContent]').summernote({

placeholder: 'Hello stand alone ui',

tabsize: 2,

height: 120,

toolbar: [

['style', ['style']],

['font', ['bold', 'underline', 'clear']],

['color', ['color']],

['para', ['ul', 'ol', 'paragraph']],

['table', ['table']],

['insert', ['link', 'picture', 'video']],

['view', ['fullscreen', 'codeview', 'help']]

]

});

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</form>

</body>

</html>

텍스트 에디터를 쓸 때 이미지를 직접적으로 넣는 행동은 하지 않는 것이 좋다. (용량을 엄청 많이 차지함)

52.text-editor.html 수정

$(function () {

$('[name=boardContent]').summernote({

placeholder: '내용을 작성하세요.',

tabsize: 2, //탭을 누르면 이동할 간격

height: 120, //에디터 높이

minHeight: 200, //에디터 최소 높이

toolbar: [

['style', ['style']],

['font', ['bold', 'italic', 'underline']],

['color', ['color']],

['para', ['paragraph']],

['table', ['table']],

['insert', ['link']],

]

});

</script>

52.text-editor.html 최종

<!DOCTYPE html>

<head>

<title>Rich Text Editor</title>

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<style>

.note-frame {

/* line-height: 1.2em; em을 설정할 때는 fontsize를 설정해야함 */

line-height: 2 !important; /* 고유한 크기의 2배 */

}

</style>

$(function () {

$('[name=boardContent]').summernote({

placeholder: '내용을 작성하세요.',

tabsize: 2, //탭을 누르면 이동할 간격

height: 120, //에디터 높이

minHeight: 200, //에디터 최소 높이

toolbar: [

['style', ['style']],

['font', ['bold', 'italic', 'underline']],

['color', ['color']],

['para', ['paragraph']],

['table', ['table']],

['insert', ['link']],

]

});

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</form>

</body>

</html>

form을 이용해서 데이터를 전송하는 경우에는 데이터가 key-value 세트를 이루어 전송된다.

주소?name=value&name=value&...

하나의 이름에 데이터를 하나만 연결하여 보낼 수 있다.

이러한 방식을 Form URL Encoding 방식이라고 부른다.

파일을 보내야 할 정보가 한 개가 아니므로 이러한 방식에선 이름만 전송된다.

따라서, 파일을 전송하고 싶다면 전송방식의 변경이 필요하다.

여기에 적잡한 방식을 Multipart 방식이라고 부른다.

form에 다음 정보를 추가한다.

method = "post" enctype= "multipart/form-data"

1. 전송 방식을 post로

2. 인코딩 타입을 multipart로

53.file-upload.html

<!DOCTYPE html>

<head>

<style>

</style>

</script>

</head>

<body>

<!--

form을 이용해서 데이터를 전송하는 경우에는

데이터가 key=value 세트를 이루어 전송된다

주소?name=value&name=value&..

하나의 이름에 데이터를 하나만 연결하여 보낼 수 있다

이러한 방식을 Form URL Encoding 방식이라고 부른다

파일은 보내야 할 정보가 한 개가 아니므로 이 방식에선 이름만 전송된다

따라서, 파일을 전송하고 싶다면 전송방식의 변경이 필요하다.

여기에 적합한 방식을 Multipart방식이라고 부른다

form에 다음 정보를 추가한다

method="post" enctype="multipart/form-data"

-->

<form action="http://localhost:8080/file/upload"

method="post" enctype="multipart/form-data">

</form>

</body>

</html>

저작자표시

'jQuery' 카테고리의 다른 글

jquery05 - 캔버스 태그, group by (0)	2023.09.12
jquery04 - ajax2 (0)	2023.09.11
jQuery03 - ajax (0)	2023.09.08
jQuery02 - checkbox, 화면분할 (0)	2023.09.07
jQuery01 - input, form, 정규표현식, 회원가입페이지 (0)	2023.09.06

'jQuery' Related Articles

코딩 노트

jQuery06 - 이미지 슬라이더, 텍스트 에디터, 파일 업로드 본문

jQuery06 - 이미지 슬라이더, 텍스트 에디터, 파일 업로드

'jQuery' 카테고리의 다른 글

티스토리툴바