버튼으로 파일 입력 필드 덮어 쓰기

Cloudinary에 의해 생성 된 입력 필드가 다음과 같습니다. 나는 짧게 만들었지 만 꽤 일반적인 드롭 존과 "찾아보기"버튼을 생성했습니다. dropzone이 필요하지 않습니다. 이상적으로는 HTML 버튼으로 모든 것을 추상화 할 수 있습니다. 여기서 click 버튼은 입력 필드를 사용하여 프롬프트합니다.버튼으로 파일 입력 필드 덮어 쓰기

<input id="id_picture" class="cloudinary-fileupload " type="file" name="file">

는 버튼과 상기 입력 필드를 대체 할 수 있는가? dropzone + "Browse"버튼 대신 버튼처럼 보이도록 파일 입력 필드를 간단하게 스타일링 할 수 있습니까? 나는 일반적으로 백 엔드 코더 해요 -이 이해가되지 않을 경우

죄송합니다. 더 자세한 정보가 필요하면 알려주십시오. 감사합니다!

출처

2013-08-09 Joker

버튼을 만들고 파일 입력을 '.01'과 같은 매우 작은 불투명도로 맨 위에 놓거나'visibility : hidden '으로 만들면 사용자가 버튼을 볼 수 있지만 파일 입력을 클릭합니다. – SeinopSys

이 질문은 여러 번 답변되었으며 답변되었습니다. http://stackoverflow.com/questions/108149/what-is-the-best-way-to-replace-the-file-browse-button-in-html/108157 # 108157 – 3dgoo

그리고 여기 : http://stackoverflow.com/questions/3226167/how-to-style-input-file-with-css3-javascript – 3dgoo

파일 입력의 스타일을 실제로 바꿀 수는 없지만 다른 컨트롤에서 클릭을 트리거 할 수는 있습니다.

신속하고 더러운 예 :

<button onclick="document.getElementById('id_picture').click();">File Upload</button>

당신은 (불행히도 display:none이 발사에서 클릭을 방지 할 수 있습니다) CSS를 사용하여 오프 스크린 실제 파일 입력을 배치 할 수 있습니다.

출처

2013-08-09 00:19:33 SimonR

버튼으로 파일 입력 필드 덮어 쓰기

답변

관련 문제