04/28 Javascript 파일업로드 : DND, Trigger (dataTransfer)

yeonee3219 2021. 4. 28. 16:27

저번시간에 트리거 & 드래그 앤 드랍 으로 파일업로드하기 알아봤다

드래그해서 드랍하기 전에 (다양한 드래그가 가능하기 때문에) 유효한 파일인지 아닌지에 대한 표시 알 수 있어야 함

일단 드래그해서 박스 위에 올리고있을때만 색바뀌도록 해준 것

드랍된 파일을 읽으려면?

-> 드래그라는 이벤트에서 이용하는 가장 큰 도구인데.. 드래그할때 가져온 데이터를 갖고있는 객체이다

-> 근데 어떤 속성을 가지고 있지?

기억이 안날 수 있으니까

for in 문으로 데이터를 순회해서 어떠한 객체던 속성을 알아낼 수 있다

for in 문으로 어떤 속성들이 있는지 알아본 것. (files인지 알아보기위해) type을 이용해야겠다

유효하지 않으면 빨갛게 경고, 유효하면 초록색

indexOf

: 뭔가를 찾을 때 많이 사용하는데

배열에서 indexOf(?) 를 사용하면 그 배열안에 담겨져 있는 ?를 넘겨줌

-> 발견된 값이 없으면 -1을 줌

그래서 여기서 valid가 0보다 크거나 같으면 유효한 것

파일의 사이즈를 출력해보려 했는데

오류남 (오버 부분에서 )

-> 드랍하고 나서만 알 수 있기 때문에

바이트크기임

드래그한 파일에 대한

날짜, 크기, 이름 .. 등등을 얻어낼 수 있다는 것

드래그앤 드랍에서의 파일읽기는 가능

이젠 파일선택버튼에서 파일읽기 해보자

click은 필요없고 change보다는 input을 많이 쓴다

이제 파일을 보여주기만 하면 됨 -> 내일 ㄱ