서버에 파일을 업로드, 올리기 위한 방법을 알아보려합니다. 만약 올릴 파일의 개수가 한개가 아닌 다수의 파일인 경우 어떻게해야 복수 파일 업로드가 가능한지 함께 알아보도록 하겠습니다.이와 함께 복수 파일의 경우 드래그앤드랍 방식의 인터페이스를 구현한다면 사용자가 더욱 편하게 업로드를 수행할 수 있을 것입니다. 만약 드래그를 구현하기 위해서 생각할 부분도 함께 알아보겠습니다. 우선 파일을 서버에 올리기위해서 화면 앞단에서느 무엇을 해야할까요?# 다수의 파일 한번에 업로드하기 위한 방법 아래에서는 파일을 웹페이지에 선택하는 것부터 서버와 통신하는 것까지 자세하게 알아보겠습니다. ! 파일 첨부가 가능한 태그와 업로드에 필요한 속성은?우리는 파일 첨부를 하기 위하여 input 태그를 사용할 것입니다. 일반적인 t
Last Modified : 2017-12-11 08:29:53클라이언트의 브라우저에서 파일 업로드를 수행할 경우 파일 용량 제한에 에러가 발생할 수 있습니다. nginx를 사용중이라면 아래와 같은 에러가 발생합니다.스크린샷) nginx 서버에 파일 업로드 크기에 따른 에러 발생그렇다면 어떻게하면 에러를 해결할 수 있으며 원하는 파일 사이즈를 허용하도록 설정하는지 알아봅니다.# nginx 서버 업로드 크기(사이즈) 설정하기먼저 nginx의 파일 업로드 크기를 정해야합니다. 설정되지 않은 경우 1M가 넘는 경우 에러가 발생할 수 있습니다. 기본 사이즈의 경우 1Mbyte로 알고 있는데 특이한 점이 개발서버와 운영서버에 설정이 같음에도 개발서버에서는 에러가 발생하지 않더군요... nginx 설정 파일은 둘 다 확인했을때 동일하였던 점을 생각하면 다른 파일이나 버전등에 영향
Last Modified : 2018-03-29 02:49:23클라이언트에서 파일을 업로드할 경우 ajax 즉, 비동기 방식으로 업로드는 하는 방법을 알아봅니다. 어떻게 하면 그리고 왜 비동기식 파일 업로드가 필요할까요?# AJAX를 사용한 파일 업로드 알아보기예전에는 주로 form 태그에 몇 가지 속성을 사용하여 submit 방식으로 파일 업로드를 수행하였습니다. 하지만 최근에는 업로드하는 경우 AJAX 방식을 사용한 비동기식 파일 업로드가 많이 사용됩니다. 특히 SPA(Single Page Application)의 경우 더욱 더 많이 사용되지요. 이 경우 blob 방식으로 변환하는 방법도 있고 아니면 FormData 객체를 사용할 수 있습니다. 아래는 FormData 객체를 사용하는 방법을 알아봅니다.! ajax 방식의 파일 업로드 자바스크립트에서 구현하기파일 업로
Last Modified : 2018-02-22 23:54:42Image 또는 파일을 업로드 할 경우 base64로 변환하여 서버에 올리는 방법에 대하여 알아봅니다.서버에 이미지를 올릴때 파일을 직접 전송할 수도 있지만 데이터를 bade64로 인코딩한 후 업로딩 하는 방법도 많이 사용됩니다. 올라간 데이터는 다시 파일로 변환하거나 데이터베이스에 바로 저장하여 사용할 수 있을 것입니다. 그렇다면 어떻게해야 base64로 인코딩, 변환할 수 있을까요?# 업로드 할 파일 base64 인코딩하기먼저 자바스크립트의 FileReader 내부객체를 사용하여 파일에 접근할수 있습니다. 이때 변수를 만들어 객체를 생성하여 해당 파일의 결과인 인코딩 값을 얻게됩니다. 아래 코드를 봐주세요.! Step 1아래와 같이 input에 파일이 담긴 경우입니다.<input type="file" i
Last Modified : 2018-05-17 13:10:56파일 업로드시 input 태그를 많이 사용input 태그 accept 속성 사용하는 방법은?<input accept="image/*" /><input accept="video/*" /><input accept="audio/*" /><input accept=".txt, .doc, .docx" />accept 속성값으로 아래와 같이 사용 가능합니다.media_typeextension nameimage/*, video/*, audio/*UI에서 바로 해당 파일 목혹만 접근해주는 장점이 있음. 예를들어 이미지로 설정된 경우 탐색기 또는 모바일 파일검색시 이미지로 필터링이 적용됨...위 속성은 IE 10 이상에서 가능합니다. 또한 HTML 4.01, HTML5의 값이 차이가 있습니다.
Last Modified : 2017-12-05 06:43:00Python flask에서 파일을 업로드 할 경우 하나가 아닌 다수라면 어떻게 해야할까요? 클라이언트측 html과 서버측 python 코드를 아래에서 알아봅니다.# Python flask에서 여러 파일 전송, 전달받기아래 예제를 통하여 html과 python 코드를 예제를 통해 알아봅니다. 먼저 파일을 전송하기 위해 간단한 입력폼이 필요합니다.! upload.html<form method="POST" enctype="multipart/form-data" action="/uploadfile/"> <input type="file" name="file[]" multiple=""> <button type="submit">Submit</button></form>이때 중요한 부분은 form 태그의 속성으로 enc
Last Modified : 2018-02-21 12:00:12HTML5에서 파일 추가하는 방법에 Drag and Drop을 사용하는 방법입니다. 하나 또는 다수 파일을 드래그앤 드랍으로 추가하는~ 업로드하는 방법은 어떻게 될까요?
Last Modified : 2017-04-04 17:17:43
