sitelink1 https://blog.logrocket.com/how-to-build-...avascript/ 
sitelink2 https://github.com/Pankajtanwarbanna/van...ree/master 
sitelink3  
sitelink4  
extra_vars4  
extra_vars5  
extra_vars6  

- 첨부파일 : vanilla_script.7z

  > index.html : ui html

  > index.js : node js src

 

vanilla script 로 file stream 을 서버에 전송하는 방법에 대해 학습하는 문서이다.

XMLHttpRequest 를 사용하지 않고 fetch() 함수를 이용하는데 대용량 파일 전송에 적합한 코드로 보인다.

 

목차는 다음과 같다.

  1. Set up the Node.js server
  2. Set up the frontend
  3. Read the file content on the frontend
  4. Divide and stream the file in chunks to the backend
  5. Receive the chunks and store them on the server
  6. Upload multiple files

문서의 링크가 오랜시간 후에도 살아있다면 계속적인 학습에 도움이 되겠지만

10년후에는 이 문서를 살펴볼일이 없을테니 본문을 스크랩하지는 않고 걍 링크만 걸어둔다.

학습의 결과로 작성된 샘플 예제는 첨부하여 맨 위에 올려두었다.

 

 

 

번호 제목 글쓴이 날짜 조회 수
27 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 1
» How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 0
25 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 황제낙엽 2023.08.21 0
24 [URLSearchParams] URL 파라미터(매개변수) 값 가져오기 file 황제낙엽 2023.02.02 0
23 Fetch API (CORS 극복을 위한 노력) 황제낙엽 2021.12.05 26
22 두 서버의 자원을 접근하는 클라이언트 프레임웍(Next.js)에서의 CORS오류 file 황제낙엽 2021.12.05 231
21 CORS 의 내용과 이에 대한 우회 방안들 file 황제낙엽 2021.12.05 139
20 client 통신 기술 jquery ajax, fetch, axios 황제낙엽 2021.12.05 8
19 XMLHttpRequest Specification 황제낙엽 2021.04.29 11
18 XMLHttpRequest.timeout 황제낙엽 2018.11.03 248
17 XMLHttpRequest 제대로 활용하기 file 황제낙엽 2017.08.01 58
16 Ajax (XMLHttpRequest) 샘플 황제낙엽 2017.08.01 93
15 Javascript CORS/XSS 극복하는(피하는) 방법 file 황제낙엽 2017.07.31 648
14 HTTP 접근 제어 (CORS) 황제낙엽 2017.05.29 125
13 CORS(Cross-Origin Resource Sharing) - 5 file 황제낙엽 2017.03.07 261
12 CORS(Cross-Origin Resource Sharing) - 4 file 황제낙엽 2017.03.07 873
11 CORS(Cross-Origin Resource Sharing) - 3 file 황제낙엽 2017.03.07 45
10 CORS(Cross-Origin Resource Sharing) - 2 황제낙엽 2017.03.07 24
9 CORS(Cross-Origin Resource Sharing) - 1 file 황제낙엽 2017.03.07 135
8 XMLHttpRequest.setRequestHeader 황제낙엽 2013.09.30 62