파일업로드 기능을 div에 넣을 수 있을까요??

Question

기본적으로 파일업로드를 할 수 있는 input의 file기능은 디자인이 한정적인거 같아다른 방식으로 파일 업로드 하는 방법을 찾고 있습니다. 말로 표현하려니까 어려운데... 자동차 비행기 기차 바나나 사과 딸기 위처럼 테이블로 표현을 했지만, 6개의 div가 있고 border를 줘서 칸마다 구분을하고 안에 내용이 있다고 했을때,해당 div를 누르면 파일 업로드 창이 뜨고 선택하면 해당 div에 미리보기 이미지가 뜨거나 업로드 되었다고 표시가 되는 기능을 구현하고 싶습니다.(div안에 적힌 내용에 맞는 이미지를 업로드 한다고 보시면 되겠습니다!) 구글링 해보다가 파일업로드 관련 기능을 찾아보니 전부 input의 file만 주구장창 떠서 질문드려봅니다 ㅎㅎ;;;

어쩌다프로그래머 · Accepted Answer

말씀 하신 플러그인은 상당히 많습니다.그런데 결국 그것도 input file 태그를 유동적으로 관리할뿐이지내부적으로는 사용을 해야 합니다.

spoon · Answer

div누르면 input file로 업로드하고 그 이미지파일을 div에 나타나게 하시면 될것같습니다

자바빵 · Answer

어쩌다플러그인도 한번 찾아보겠습니다! spooninput을 숨겨놓고 .trigger로 기능만 동작하게 만들라는 말씀인가요??이 방법도 한번 해보겠습니다!

유리세계 · Answer

label 을 쓰는 방법도 있고요말씀하신대로 input을 숨겨놓고 trigger 나 click 을 이용하는 방법도 있습니다

파일업로드 기능을 div에 넣을 수 있을까요??

4개의 답변

Q&A 목록