type="file"(2)
-
[FileUpload]_DataTransfer() 를 사용한 multiple 업로드 구현
목적 ] Jquery 와 ES6 를 사용하여 input type="file" 의 다중 업로드 및 제약조건 부여하기 Front 부분] 찾아보기 label 에 for를 이용하여 디자인을 입힐 수 있습니다. input type="file" 에 accept 속성을 이용하여 파일 첨부시 보여지는 파일을 정할 수 있습니다. 단 완전하게 막지는 못하기 때문에 Controller 부분에서 제어를 해줘야 합니다. Script 부분] 1] 사용할 DataTransfer 객체와 총 파일 업로드 가능한 수 선언 const dt = new DataTransfer(); let totalCount = 5; 2] 파일 업로드 될 때 이벤트 걸기 $('#filename').on('change', function () { 부분으로 파일..
2022.05.15 -
[Input_type="file"]_업로드 구현을 위한 프론트 부분
포스팅 목표] 파일 업로드 방식 중 많이 사용하는 을 사용해 여러파일을 등록 가능하게 하며, 등록된 파일의 썸네일 표출 , line 별 삭제기능 구현 방식 설명 완료화면] HTML ] 제목 : 내용 : 파일첨부 : 파일 등록 등록 취소 Input type="file" 을 그대로 사용하면, 버튼부분과 text 부분으로 나뉘는데, 동적변환시 해당 text가 바로바로 바뀌지 않아서 label 을 사용하여 클릭이벤트를 위임하고, css를 사용해서 input 을 숨길 것입니다. 또한 여러 파일을 전달할 수 있도록 multiple 속성을 부여합니다. CSS] .fileuploder label { display: inline-block; padding: .5em .75em; font-size: inherit; lin..
2022.04.29