js実装 input type='file' ファイルアップロードのサンプルコード-jsチュートリアル-php.cn

js実装 input type='file' ファイルアップロードのサンプルコード

高洛峰

リリース： 2016-12-24 17:14:27

オリジナル

1461 人が閲覧しました

開発ではファイルのアップロードが不可欠です。はよく使われるアップロードタグですが、通常は非表示にし、他のタグ (写真など) をクリックすると、ファイルのアップロード機能が実現します。
コードを見てください:

<!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 をまったく取得できません。、これに変更すべきだと言う人もいます:

<!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 のをクリックします。単一のユーザーにはバックグラウンドファイルでアップロードする情報を取得することもできます。 OK

概要:
不透明度 0 のを使用して、ユーザーに表示したいラベル (または画像など) を覆い、ユーザーがクリックできるようにします。それ。
width height line-height font-size を使用して、の右側にある参照ボタンのサイズを制御します。
左上 (右、下) を使用して、の右側にある閲覧ボタンの位置を制御します。負の値に設定できます。
z-index を使用して、レイヤーのカバレッジ関係を設定します。
ファイルをアップロードするにはフォームに enctype="multipart/form-data" タグが必要です

その他の js 実装 input type="file" ファイルアップロードサンプルコード関連記事については、PHP 中国語 Web サイトに注目してください。