form HTML5이후로 action을 작성하지 않아도 된다. GET 방식과 POST방식이 있다. ==================== input : file form에 enctype : multipart/form-data 를 무조건 추가. => form의 method = 무조건 post. => contents 를 주소로 보낼 수 없음 HTMLInputElement.files 속성은 선택한 파일(File) 목록을 FileList 객체로 반환합니다. FileList는 배열처럼 행동하므로, length 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다. name 파일 이름. lastModified 파일을 마지막으로 수정한 시각을 나타내는 숫자. UNIX 표준시(1970년 1월 1일 자정)으로부터 지난 ..

FrontEnd/JavaScript 2021. 11. 1. 17:58

How to Drag&Drop File Upload 파일을 이곳에 끌어다 놓아주세요 submit

FrontEnd/JavaScript 2021. 11. 1. 17:57

안녕하세요 상훈입니다. Javascript의 Promise에 대해 알아보겠습니다. 내용은 해당 영상을 참고하였습니다. Promise 는 async 까지 연결되어 사용하는 내용도 가능합니다. 하지만 이번에는 성공, then() 까지만 확인하도록 하겠습니다. 예시) 일반적인 함수 사용하기. 기본적으로 delay라는 함수가 있을 때, 인자로 sec와 callback을 받습니다. 함수 내부에는 setTimeout을 이용하여 sec초 뒤에 callback을 출력하는 함수입니다. (시간을 띄울거예요!) function delay(sec, callback) { setTimeout(() => { callback (new Date().toISOString()) }, sec * 1000) } delay(1, (result..

FrontEnd/JavaScript 2021. 10. 28. 22:10

안녕하세요 상훈입니다. 이 글을 PHP에 올려야할지 javascript에 올려야할지 고민을 1초 정도 했고 자바스크립트 기반이기 때문에 자바스크립트에 게시하게 되었습니다. 해당 과정은 [ select-box의 한 항목을 선택하면, 그 아래의 select-box가 활성화되면서 해당되는 리스트를 출력 ] 합니다. Ajax로 php에 호출을 하면, php의 데이터베이스에서 데이터를 출력하여 배열에 담고, 담은 배열을 json endcode하여 출력하는 값을 json 형식으로 받아, 파싱하여 출력하는 것입니다. 1. javascript(ajax) (제이쿼리 필요합니다! [ cdn 링크 ] ) 2. php [ jQuery ] jQuery 제이쿼리 CDN 링크 공유 안녕하세요 상훈입니다. 자바스크립트 - 제이쿼리의..

FrontEnd/JavaScript 2021. 10. 20. 11:43

안녕하세요 상훈입니다. $.ajax({ url: ' ' , method: ' ' , data: { }, erorr: ( ) => { }, success: ( ) => { } }) 이랬던 ajax가 변경되었습니다. $.ajax({ url: ' ' , method: ' ' , data: { } , }) .done ( ) .fail ( ) 참고 바랍니다. jQuery.ajax() | jQuery API Documentation Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly ..

FrontEnd/JavaScript 2021. 10. 20. 11:06

안녕하세요 상훈입니다. Html, Css, Javascript 로 로딩 화면을 만드는 방법에 대해 포스팅하겠습니다. BootStrap 을 이용하여 공통 클래스를 지정하였고. 일부분은 직접 작성하였습니다. html Loading... Css #loader { width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: block; opacity: 0.8; background: rgb(156, 154, 154); z-index: 99; text-align: center; } #loader>div { position: absolute; top: 50%; left: 50%; z-index: 100; } Javascript $(window).on('..

FrontEnd/JavaScript 2021. 10. 6. 12:22

안녕하세요 상훈입니다. 자바스크립트 - 제이쿼리의 cdn을 공유합니다. 해당 코드 한줄을 내에 넣어줍니다.

FrontEnd/JavaScript 2021. 10. 6. 12:15

안녕하세요 상훈입니다. 드림코딩 앨런님의 강의로 자바스크립트를 이용하여 짧고 간단한 쇼핑 웹앱을 구현하도록 해보겠습니다. index.html Blue Yellow Pink main.js // Fetch the items from the JSON file function loadItems() { return fetch('data/data.json') .then(response => response.json()) .then(json => json.items) } // update the list with the given items function displayItems(items) { const container = document.querySelector('.items') container.innerHT..

FrontEnd/JavaScript 2021. 9. 9. 16:44