Node.js 구현 입력 유형='파일' 파일 업로드 샘플 코드-JS 튜토리얼-php.cn

Node.js 구현 입력 유형='파일' 파일 업로드 샘플 코드

高洛峰

풀어 주다： 2016-12-24 17:14:27

원래의

1459명이 탐색했습니다.

개발시에는 파일업로드가 필수입니다. 자주 사용되는 업로드 태그이지만 보기 흉하고 검색어를 변경할 수 없습니다. ="file" />숨기기, 다른 태그(사진 등)를 클릭하면 파일 업로드 기능을 실현할 수 있습니다.
코드 보기:

<!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>

로그인 후 복사

그러나 Firefox 및 일부 상위 버전 브라우저에서는 업로드할 파일을 백그라운드에서 얻을 수 있지만 일부 하위 버전 브라우저에서는 Request.Files를 얻을 수 없습니다. all
정보를 찾아보니 몇몇 분들은 이렇게 바꿔야 한다고 하더군요:

<!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>

로그인 후 복사

이미지를 클릭하여 선택하면 실제로 불투명도가 0인 을 볼 수 없습니다. 업로드할 파일을 백그라운드에서 가져올 수도 있습니다.

알겠습니다
요약:
사용자에게 표시하려는 라벨(또는 이미지 등)을 가리려면 불투명도가 0인 사용자가 클릭할 수 있다는 것입니다.
너비 높이 라인 높이 글꼴 크기를 사용하여 오른쪽에 있는 찾아보기 버튼의 크기를 제어하세요.
왼쪽 상단(오른쪽, 하단)을 사용하여 오른쪽에 있는 탐색 버튼의 위치를 제어하며 음수 값으로 설정할 수 있습니다.
Z-색인을 사용하여 레이어 적용 범위 관계를 설정하세요.
파일을 업로드하려면 양식에 enctype="multipart/form-data" 태그가 있어야 합니다

더 많은 js 구현 입력 유형="file" 파일 업로드 샘플 코드 관련 기사를 참조하세요. PHP 중국어 웹사이트를 주목하세요!