js input type="file"파일 업로드 예제 코드 구현

5562 단어 input파일 업로드
개발 에 있어 서 파일 업로드 가 적지 않 아 도 됩 니 다.자주 사용 하 는 업로드 태그 입 니 다.그러나 못 생 겼 고 탐색 하 는 글 자 는 바 꿀 수 없습니다.저 희 는 보통 숨 기 고 다른 태그(그림 등)를 누 를 때 파일 업로드 기능 을 선택 합 니 다.코드 보기:
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="js/jquery/jquery-1.8.2.min.js" type="text/javascript"></script> 
<style type="text/css"> 
._box 
{ 
width: 119px; 
height: 37px; 
background-color: #53AD3F; 
background-image: url(images/bg.png); 
background-repeat: no-repeat; 
background-position: 0 0; 
background-attachment: scroll; 
line-height: 37px; 
text-align: center; 
color: white; 
cursor: pointer; 
} 
.none 
{ 
width: 0px; 
height: 0px; 
display: none; 
} 
</style> 
<title>js    input file      /></title> 
</head> 
<body> 
<form id="form1" runat="server" method="post" enctype="multipart/form-data"> 
<div> 
<div class="_box">    </div> 
</div> 
<div class="none"> 
<input type="file" name="_f" id="_f" /> 
</div> 
</form> 
</body> 
</html> 
<script type="text/javascript"> 
jQuery(function () { 
$("._box").click(function () { 
$("#_f").click(); 
}); 
}); 
</script>
그러나 불 여우 와 일부 고 버 전의 브 라 우 저 에서 백 스테이지 에서 업로드 할 파일 을 얻 을 수 있 습 니 다.일부 저 버 전의 브 라 우 저 는 Request.Files 에서 자 료 를 찾 을 수 없습니다.이렇게 바 뀌 었 다 고 합 니 다.
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="js/jquery/jquery-1.8.2.min.js" type="text/javascript"></script> 
<style type="text/css"> 
._box 
{ 
width: 119px; 
height: 37px; 
background-color: #53AD3F; 
background-image: url(images/bg.png); 
background-repeat: no-repeat; 
background-position: 0 0; 
background-attachment: scroll; 
line-height: 37px; 
text-align: center; 
color: white; 
cursor: pointer; 
} 
.none 
{ 
width: 0px; 
height: 0px; 
display: none; 
} 
</style> 
<title>js    input file      /></title> 
</head> 
<body> 
<form id="form1" runat="server" method="post" enctype="multipart/form-data"> 
<div> 
<div class="_box">    </div> 
</div> 
<div class="none"> 
<input type="file" name="_f" id="_f" /> 
</div> 
</form> 
</body> 
</html> 
<script type="text/javascript"> 
jQuery(function () { 
$("._box").click(function () { 
return $("#_f").click(); 
}); 
}); 
</script>
return 키 워드 를 추가 하여 호환성 이 많이 향상 되 었 지만 일부 브 라 우 저 는 사용 하기 어렵 습 니 다.우 리 는백 스테이지 만 수 동 으로 클릭 하면 업로드 할 파일 을 얻 을 수 있 음 을 발 견 했 습 니 다.그래서 우 리 는 투명 하 게코드 를 다음 과 같이 수정 할 수 있 습 니 다.
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
._box 
{ 
position: relative; 
width: 119px; 
height: 37px; 
background-color: #53AD3F; 
background-image: url(images/bg.png); 
background-repeat: no-repeat; 
background-position: 0 0; 
background-attachment: scroll; 
line-height: 37px; 
text-align: center; 
color: white; 
cursor: pointer; 
overflow: hidden; 
z-index: 1; 
} 
._box input 
{ 
position: absolute; 
width: 119px; 
height: 40px; 
line-height: 40px; 
font-size: 23px; 
opacity: 0; 
filter: "alpha(opacity=0)"; 
filter: alpha(opacity=0); 
-moz-opacity: 0; 
left: -5px; 
top: -2px; 
cursor: pointer; 
z-index: 2; 
} 
</style> 
<title>js    input file      /></title> 
</head> 
<body> 
<form id="form1" runat="server" method="post" enctype="multipart/form-data"> 
<div> 
<div class="_box"> 
<input type="file" name="_f" id="_f" /> 
     
</div> 
</div> 
</form> 
</body> 
</html>
우 리 는 그림 을 선택 하려 면 실제 투명 하지 않 은를 클릭 했 습 니 다.단일 사용자 가배경 을 보지 못 해도 업로드 할 파일 을 가 져 올 수 있 습 니 다.ok 요약:사용자 가 볼 수 있 는 탭(또는 그림 등)에 투명 하지 않 은을 덮어 사용자 가 클릭 하도록 합 니 다.width height line-height font-size 로오른쪽 탐색 단추 의 크기 를 제어 합 니 다.왼쪽 top(right,bottum)으로오른쪽 탐색 단추 의 위 치 를 제어 하면 마이너스 로 설정 할 수 있 습 니 다.z-index 로 레이 어 링 관 계 를 설정 합 니 다.form 은 enctype="multipart/form-data"태그 가 있어 야 파일 을 업로드 할 수 있 습 니 다.
Sql 서버 기본 함수
페이지 별 저장 프로시저

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage