프로그래밍/JavaScript6 Javascript 파일업로드 input 태그 multiple 사용시 FileList 동적으로 변경하기 form 태그에서 multiple로 파일 업로드 구현 업로드된 파일 예시 화면에서는 파일을 삭제해도 input창에는 그대로 남아있습니다. 콘솔 창으로 확인 결과 File Input 내부적으로 files라는 FileList를 가지고 있었습니다. 여기서 문제는 html은 삭제를 해도 FileList 즉 input tag에는 삭제가 되지 않았습니다. 검색 결과 Javascript가 제공하는 DataTransfer 객체로 이 문제를 해결할 수 있다고 합니. MDN DataTransfer문서를 보면 Drag and drop API라고 소개되어 있습니다. MDN FileList를 보면 Drag and drop할 때 FileList를 사용할수 있다고 합니다. const dataTranster = new DataTra.. 2023. 1. 8. javascript & jQuery 요소 찾기 정리 javascript document.getEelmentsByTagName(태그이름) document.getEelmentById(아이디); document.getEelmentsByClassName(클래스이름); //HTMLCollection 반환 document.getElementsByName(name속성값); document.querySelector(CSS 선택자); //선택자에 해당하는 첫번째요소만 선택 document.querySelectorAll(CSS 선택자) //선택자에 해당하는 모든요소, 반환객체(nodeList) * HTMLCollection - 요소의 문서 내 순서대로 정렬된 일반 컬렉션(arguments 처럼 배열과 유사한 객체) - 리스트에서 선택할 때 필요한 메서드와 속성을 제공 * .. 2023. 1. 8. JQuery serialize( ), serializeArray( ), serializeObject( ) 사용법 프로젝트 하면서 헷갈리는것들 정리 했습니다. 이런 형태의 form이 있을때 serialize JQuery에서 제공하는 기능인 serialize 메서드는 태그 내부의 값을 name=value으로 변경하면서 쿼리 스트링을 만들어준다. 추가로 serialize 메서드는 form에 값을 추가하기 어려울 경우가 있는데 따로 값을 추가 할 수 있습니다. var form = $("#form").serialize(); console.log(form); //name=Park&name=Kim&age=20 form += "&hobby="+$("#game").val(); console.log(form); //name=Park&name=Kim&age=20&hobby=overWatch2 serializeArray 태그 내부의 값.. 2023. 1. 5. 자바스크립트 함수 선언 6가지 방법 1. named function declaration (명명 함수 선언) function hello() { // ... } 현재 내가 재직하는 회사에서 제일 많이 사용하는 방법이자 가장 대중적임 호이스팅이 되기 때문에 이 함수는 어느 스코프에서든 호출 할수 있음 2. anonymous function expression (익명 함수 표현) var hello = function () { //... } hello.name // > "hello" hello // > ƒ () { // //... // } 이름이 없는 함수를 변수에 담은 방식이다. 이름이 없는 함수긴 한데, 자바스크립트 엔진이 자동으로 이름을 변수명으로 추정하여 넣는다. 변수 할당은 호이스팅 되지 않으므로, 할당 된 이후에만 실행 가능하다. 3... 2022. 11. 2. 이전 1 2 다음
