Chrome 및 Firefox 파일 업로드 탐색 버그

Question

양식 유형 = "파일"업로드에 대한 완전한 UI 스타일을 갖기 위해 의사 양식 필드 (#fileName), 찾아보기, 업로드 버튼이 있습니다. 아래에 실제 양식 필드 (#fileAttach), 찾아보기 및 업로드 버튼이있는 숨겨진 양식이 있습니다. 사용자가 찾아보기를 클릭하면 실제 찾아보기 단추를 트리거 한 다음 실제 입력 필드의 파일 경로 값을 가져 와서 의사 입력 필드에 파일을 채우도록 트리거하려고합니다.

browse = function() { 
     $("#fileAttach").click(); 
     var file = $("#fileAttach").val(); 
     $("#fileName").val(file); 
     } 

Safari 및 IE에서 작동합니다. 그러나 크롬과 파이어 폭스에서는 사용자가 파일을 선택한 후에 실행이 중지 된 것으로 보입니다. 파일 이름은 의사 양식 필드로 전달되지 않습니다. 그러나 두 번째로 browse()를 실행하면 첫 번째 파일 경로가 의사 양식 필드에 즉시 채워지고 새 파일 찾아보기 창이 생성됩니다. Chrome/FF는 함수의 첫 번째 행 만 실행하고 일시 중지하는 것으로 보입니다. 함수가 다시 호출되면 두 번째 줄과 세 번째 줄이 실행됩니다.

어떻게 될까요? 어떻게 해결할 수 있습니까? 미리 감사드립니다.

Answer 1

브라우저는 코드를 통해 업로드 대화 상자를 실행하는 것을 정말로 좋아하지 않습니다.

나는 항상 내 자신의 찾아 버튼을 표시 절대적으로 opacity: 0와 맨 위에 input[type=file]을 배치했습니다. 모든 브라우저에서 작동합니다.