파일 업로드 폼 만들기 & 업로드한 파일 삭제 구현

See the Pen 파일업로드 by MarineLife (@ghdic) on CodePen.

multiple 속성을 사용하여 여러 파일 업로드를 받고 싶었는데.. 그게 잘안됐다

브라우저 보안때문에 input태그 속성에 FileList자료형을 가진 files이라는 녀석이 있는데 이녀석이 readonly이다. 자바스크립트나 Jquery로 수정이 불가능하다. 이녀석이 바로 form에서 데이터를 넘겨줄때 서버쪽에서 받는 파일이다.

위 방식은 input이 들어올 경우, 해당 input태그를 클론(복제)해서 hidden 태그 안에 감추는 방식을 사용한다. 데이터는 name속성이 있는아이만 넘겨받기 때문에 파일을 입력받는 input태그의 데이터는 name속성을 지정하지 않고, hidden 태그로 클론된 녀석에게 name속성을 지정해준다.

multiple을 사용하지 못하는 이유는.. input태그 하나에 여러개의 파일(파일리스트)가 들어가버리면, 파일 삭제 구현 부분에서 클론(복제)한 것 역시 여러개의 파일이 들어있기 때문에 하나씩 파일을 삭제하는게 불가능해진다.

 

이러한 문제점 때문에, 드래그앤 드랍도 구현을 못했는데, 실제 이러한걸 구현하기 위해서는 ajax를 통해서 파일이 드래그 드랍 등의 업로드 행위가 되는 즉시 서버에 업로드 되고, 삭제시도 ajax를 통해서 처리한는 방식을 많이 사용하는것 같다. 결론은 한번에 multiple하게 input을 받고 싶거나, drag & drop을 구현하고 싶으면 ajax를 사용하자

 

맨 처음 찾았던 예제인데 이녀석 때문에 삽질좀 했었다.

 

See the Pen Multiple Upload - aksFileUpload.js by MarineLife (@ghdic) on CodePen.

jquery aksfileupload라는 라이브러리를 사용해서 만들어진 소스인데, 실제 드래그앤 드랍과 삭제는 UI상에서는 잘되는것 처럼 보인다. 하지만 실제로 submit을 거쳐서 데이터를 받아보면, 삭제한 파일 데이터도 넘어오고, 업로드를 여러번 할 경우 로직이 꼬인다던지 하는 문제점이 있다. 그래서 이 라이브러리에서도 ajax 방식으로 데이터를 넘기는것과 관련해 지원을 한다.

 

ajax.. 공부안할려 했는데 나중에 시간나면 꼭좀 봐놔야 겠다. 시간 엄청 날렸네..