프로그래밍 방식으로 Onclick 이벤트를 트리거합니까?

Question

iframe을 사용하여 비동기 파일 업로드를 시뮬레이션하려고합니다. 여기 내 마크 업이 있습니다.

<form method="POST" enctype="multipart/form-data" name="change-avatar" action="/dyn/actions/upload?type=profile" target="target-upload">
<input type="file" name="change-avatar-input" style="position: absolute; z-index: 999; cursor: pointer; left: 10px; top: 57px; width: 147px; height: 23px; opacity: 0;"/>
<div style="position: absolute; z-index: 1000; cursor: pointer; left: 10px; top: 57px; width: 147px; height: 23px; opacity: 0;"/>
</form>
<button id="avatar-src" class="browse-button" type="button">Select File to Upload</button>

일반 버튼을 가져 와서 입력 유형 = 파일을 그 위에 놓고 불투명도를 0으로 설정했습니다.이 입력은 숨겨진 iframe에 제출됩니다. 문제는 파일 입력이 예기치 않은 커서 (포인터 인 것으로 예상)를 생성하며 안정적으로 스타일이 될 수 없다는 것입니다. 0 불투명 파일 입력에 또 다른 0 불투명도 DIV를 배치하여 올바른 커서를 생성하도록 스타일링 하여이 문제를 해결했습니다. 그런 다음 이벤트 핸들러를 설정하여 0 불투명도 DIV 클릭을 감지하여 프로그래밍 방식으로 파일 입력의 OnClick 이벤트를 프로그래밍 방식으로 트리거합니다. click().

문제는 object.click() Firefox (IE에서 예상대로 작동)에서 지원되지 않는 것 같습니다.

Answer 1

Valums Ajax 업로드를 확인하십시오. http://valums.com/ajax-upload/

그 구성 요소는 당신이하려는 것처럼 보이는 것을 달성했습니다 ... 당신은 당신의 코드에 대한 좋은 아이디어를 얻을 수 있어야합니다 (또는 구성 요소를 대신 사용하십시오).