투명도 효과를 사용하여 파일 업로드 버튼 컨트롤 style_javascript 기술을 사용자 정의하세요.

<meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>업로드...</title> <style> #ui-upload-holder{ position:relative;width:60px;height:35px;border:1px solid silver; overflow:hidden;} #ui-upload-input{ position:absolute;top:0px;right:0px;height:100%;cursor:pointer; opacity:0;filter:alpha(opacity:0);z-index:999;} #ui-upload-txt{ position:absolute;top:0px;left:0px;width:100%;height:100%;line-height:35px;text-align:center;} #ui-upload-filepath{ position:relative; border:1px solid silver; width:150px; height:35px; overflow:hidden; float:left;} #ui-upload-filepathtxt{ position:absolute; top:0px;left:0px; width:100%;height:35px; border:0px; line-height:35px; } .uploadlay{margin:200px; border:1px green solid; width:300px; height:200px; padding:10px; } </style> <div class="uploadlay"> <div id="ui-upload-filepath"> <input type="text" id="ui-upload-filepathtxt" class="filepathtxt"> </div> <div id="ui-upload-holder"> <div id="ui-upload-txt">업로드</div> <input type="file" id="ui-upload-input" name="myfile"> </div> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

1. 이전 버전에서는 브라우저(예: fileAPI를 지원하지 않는 IE9 이하, XMLHttprequest level2를 지원하지 않고 form post 파일만 사용할 수 있음)에서 이미지를 업로드할 때 보안상의 이유로 form post만 사용할 수 있습니다. [type="file"] 파일 선택 버튼 스타일은 마음대로 수정할 수 없으며(단, 입력의 투명도는 수정 가능) 디자이너의 디자인과 호환되지 않을 수 있습니다. 이 경우 투명도 효과를 사용하여 맞춤 설정할 수 있습니다. 업로드 버튼.
2. 파일 컨트롤 탐색 버튼의 너비는 수정할 수 없으므로 컨트롤의 너비는 60px를 초과하지 않는 것이 가장 좋습니다. Firefox에서는 약 60px입니다. 60px를 초과하는 경우 컨트롤의 마우스 스타일을 설정하지 마십시오. Firefox에서 파일 컨트롤의 마우스 스타일은 찾아보기 버튼에만 적용되므로 마우스 스타일을 설정하면 컨트롤의 왼쪽 및 오른쪽 스타일이 일치하지 않게 됩니다. .
3. 컨트롤 텍스트 표시 레이어의 행 높이는 컨트롤 컨테이너 레이어의 높이와 일치하여 텍스트가 세로 중앙에 위치하도록 해야 합니다.
4. 파일 업로드 제어는 서버에 파일을 업로드하기 전에 마우스를 사용하여 찾아보기 버튼을 클릭하여 파일 선택 창을 띄워야 합니다(파일 API는 지원되지 않음). () 파일 컨트롤의 이벤트는 js를 통해 발생합니다. 파일 선택 창을 띄워서 파일을 선택하는 방식으로는 파일을 업로드할 수 없으므로 파일 컨트롤이 텍스트 표시 레이어를 덮도록 하고 파일 컨트롤 스타일을 로 설정해야 합니다. 아래 텍스트 레이어를 표시하려면 투명하게 설정하세요.
5. xmlhttprequest 구성 요소(레벨 1, 레벨 2는 이미 바이너리 데이터 업로드 및 도메인 간 지원)를 업로드할 수 없습니다. 파일을 비동기적으로 업로드하려면 업로드 컨트롤을 도입하고 양식 게시 데이터를 사용해야 합니다. 파일 업로드 기능을 iframe에 별도로 넣습니다. 시스템 내에서 구현할 수도 있고, 이미지 업로드를 처리하는 서버 스크립트를 iframe에서 열도록 지정할 수도 있습니다(양식의 대상이 iframe 창을 가리키도록 설정). .

코드 복사

코드는 다음과 같습니다.<script> document.getElementById("ui-upload-input").onchange=function(){ document.getElementById("ui-upload-filepathtxt").value = this.value; } </script>

<머리>


<스타일>
#ui-upload-holder{ 위치:상대적;너비:60px;높이:35px;테두리:1px 솔리드 실버; 오버플로:숨김;}
#ui-upload-input{ 위치:절대;위:0px;오른쪽:0px;높이:100%;커서:포인터; 불투명도:0;필터:알파(불투명도:0);z-index:999;}
#ui-upload-txt{ position:absolute;top:0px;left:0px;width:100%;height:100 %;line-height:35px;text-align:center;}
#ui-upload-filepath{ 위치:상대적; 테두리:1px 솔리드 실버; 너비:150px; 높이:35px; 오버플로:숨김; 부동:왼쪽;}
#ui-upload-filepathtxt{ 위치:절대; 위쪽:0px;왼쪽:0px; 너비:100%;높이:35px; 테두리:0px; 줄 높이:35px; }
.uploadlay{margin:200px; 테두리:1px 녹색 고체; 너비:300px; 높이:200px; 패딩:10px; }


<본문>

上传

<스크립트>
document.getElementById("ui-upload-input").onchange=function(){
document.getElementById("ui-upload-filepathtxt").value = this.value;
}