파일 스타일 업로드를위한 HTML5를 지원하는 브라우저 솔루션

댓글 : 최근 파일 업로드 제어를 사용하고 파일 업로드 제어의 두 가지 호환성 문제를 발견했습니다. 하나는 파일 업로드 컨트롤이 Firefox에서 CSS를 통해 너비를 변경할 수 없으며, 다른 하나는 파일 업로드 제어가 다른 브라우저에서 다른 브라우저에서 모양을 다르게 행동한다는 것입니다. 이 기사는 자세한 솔루션을 제공합니다.

아래는 IE10, Firefox16, Chrome22, Opera12, Safari5.1.7의 파일 업로드 컨트롤의 스크린 샷입니다.

IE10에서 입력 상자를 두 번 클릭하거나 버튼을 클릭하여 파일 선택 상자를 팝업하십시오. 다른 브라우저에서 입력 상자, 버튼 또는 텍스트를 클릭하면 파일 선택 상자가 트리거 될 수 있습니다.

이러한 혼란을 감안할 때, 동일하고 행동을 통일해야합니다. 다음은 호환성 솔루션입니다.

먼저 각 브라우저에서 최종 결과의 스크린 샷을 살펴 보겠습니다.

기본 아이디어 : 파일 업로드 컨트롤을 시뮬레이션하기 위해 입력 상자 및 버튼을 만듭니다. 파일 업로드 컨트롤을 투명하게 설정하십시오. 시뮬레이션에 사용되는 버튼으로 파일 업로드 제어를 올바르게 정렬하십시오. 버튼이 아래에 있도록 요소의 스태킹 순서를 수정하고 파일 업로드 컨트롤이 중간에 있고 입력 상자가 위에 있습니다. 파일 선택이 완료되면 파일 업로드 컨트롤의 값을 시뮬레이션에 사용되는 입력 상자에 할당하십시오.

원리 : 다른 브라우저에서 파일 업로드 컨트롤 버튼 높이가 조정 가능하며 파일 업로드 컨트롤의 오른쪽을 클릭 할 수 있습니다. 따라서 파일 업로드 컨트롤의 높이를 조정하고 파일 업로드 제어 (오른쪽 정렬)의 위치를 ​​조정하면 파일 업로드 제어의 클릭 가능 영역을 시뮬레이션에 사용하는 버튼으로 완전히 덮어 쓸 수 있습니다. 파일 업로드 컨트롤이 투명하면 사용자는 시뮬레이션 버튼을 클릭하면 파일 선택 상자가 트리거됩니다. 그러나 동시에 파일 업로드 컨트롤의 스택 순서는 시뮬레이션에 사용되는 입력 상자가 우선 할 수 없습니다. 그렇지 않으면, 사용자가 마우스를 입력 상자에 놓으면 커서가 텍스트가 아니라 화살표를 나타내는 것을 볼 수 있습니다 (화살표로 클릭하면 파일 선택 상자가 나타납니다).

구현 : HTML 부분의 코드를 먼저 살펴 보겠습니다.

<div>

<입력 유형 = "text"value = "파일 선택되지 않음" /> <입력 유형 = "버튼"value = "Browse" /> <input type = "file" />

</div>

그런 다음 CSS 부분에 대한 코드가 있습니다.

#file {

위치 : 상대;

너비 : 226px;

높이 : 25px;

국경 : 1px #99f 고체;

}

#File 입력 {

글꼴 크기 : 16px;

여백 : 0;

패딩 : 0;

위치 : 상대;

수직 정상 : 중간;

개요 : 없음;

}

#file 입력 [type = "text"] {

국경 : 3px 없음;

너비 : 172px;

Z- 인덱스 : 4;

}

#file 입력 [type = "button"] {

너비 : 54px;

높이 : 25px;

z- 인덱스 : 2;

}

#file input [type = "file"] {

위치 : 절대;

오른쪽 : 0px;

높이 : 25px;

불투명도 : 0;

Z- 인덱스 : 3;

}

마지막으로, JavaScript 부분은 파일 업로드 컨트롤에 의해 가시 입력 상자에 얻은 파일 경로를 표시하는 데 사용됩니다.

Window.onload = function () {

var file = document.querySelector ( "#파일 입력 [type = 'file']");

var text = document.querySelector ( "#파일 입력 [type = 'text']");

file.addeventListener ( "Change", 할당, false);

함수 할당 () {

text.value = file.value;

}

}

의사 소통이나 수정을위한 메시지를 남겨 주시기 바랍니다.