Node.js 구현 입력 유형='파일' 파일 업로드 샘플 코드
- 高洛峰원래의
- 2016-12-24 17:14:271443검색
개발시에는 파일업로드가 필수입니다. 61b9b53f6d762f7c3b14ccfc7d4eaf40 자주 사용되는 업로드 태그이지만 보기 흉하고 검색어를 변경할 수 없습니다. ="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 키워드가 추가되어 호환성이 많이 좋아졌는데 아직 일부 브라우저에서는 사용하기 쉽지 않습니다.
백그라운드에서 61b9b53f6d762f7c3b14ccfc7d4eaf40
다음과 같이 코드를 수정합니다.
<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인 61b9b53f6d762f7c3b14ccfc7d4eaf40 aa0e8e73488ab17723a59533e905867f을 볼 수 없습니다. 업로드할 파일을 백그라운드에서 가져올 수도 있습니다. 알겠습니다
요약:
사용자에게 표시하려는 라벨(또는 이미지 등)을 가리려면 불투명도가 0인 61b9b53f6d762f7c3b14ccfc7d4eaf40 사용자가 클릭할 수 있다는 것입니다.
너비 높이 라인 높이 글꼴 크기를 사용하여 61b9b53f6d762f7c3b14ccfc7d4eaf40 오른쪽에 있는 찾아보기 버튼의 크기를 제어하세요.
왼쪽 상단(오른쪽, 하단)을 사용하여 61b9b53f6d762f7c3b14ccfc7d4eaf40 오른쪽에 있는 탐색 버튼의 위치를 제어하며 음수 값으로 설정할 수 있습니다.
Z-색인을 사용하여 레이어 적용 범위 관계를 설정하세요.
파일을 업로드하려면 양식에 enctype="multipart/form-data" 태그가 있어야 합니다
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.