js-Implementierung Eingabetyp = „Datei' Beispielcode zum Hochladen der Datei-js-Tutorial-php.cn

js-Implementierung Eingabetyp = „Datei' Beispielcode zum Hochladen der Datei

高洛峰

Freigeben： 2016-12-24 17:14:27

Original

1421 Leute haben es durchsucht

Das Hochladen von Dateien ist ein häufig verwendetes Upload-Tag, aber es ist hässlich und das Browserwort kann nicht geändert werden ="Datei" />Ausblenden, klicken Sie auf andere Tags (Bilder usw.), um die Datei-Upload-Funktion zu nutzen.
Sehen Sie sich den Code an:

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

Nach dem Login kopieren

In Firefox und einigen Browsern höherer Versionen können die hochzuladenden Dateien jedoch im Hintergrund abgerufen werden, während einige Browser niedrigerer Versionen Request.Files nicht unter abrufen können alle
Beim Nachschlagen der Informationen sagten einige Leute, dass es wie folgt geändert werden sollte:

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

Nach dem Login kopieren

Ein Schlüsselwort „return“ wurde hinzugefügt und die Kompatibilität wurde erheblich verbessert, bei einigen Browsern ist dies jedoch immer noch der Fall nicht einfach zu bedienen.
Wir haben festgestellt, dass wir die hochzuladende Datei auf jeden Fall erhalten können, indem wir im Hintergrund manuell auf klicken.
Ändern Sie den Code wie folgt:

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

Nach dem Login kopieren

Wenn wir das Bild auswählen, klicken wir tatsächlich auf mit einer Deckkraft von 0. Ein einzelner Benutzer kann nicht sehen. Die hochzuladende Datei kann auch im Hintergrund abgerufen werden.

ok
Zusammenfassung:
Verwenden Sie einen mit einer Deckkraft von 0, um die Beschriftung (oder das Bild usw.) abzudecken, die der Benutzer sehen soll dass der Benutzer darauf klicken kann.
Verwenden Sie width height line-height font-size, um die Größe der Durchsuchen-Schaltfläche rechts von zu steuern.
Verwenden Sie links oben (rechts, unten), um die Position der Schaltfläche zum Durchsuchen auf der rechten Seite von zu steuern, die auf einen negativen Wert eingestellt werden kann.
Verwenden Sie den Z-Index, um die Beziehung der Ebenenabdeckung festzulegen.
Das Formular muss über das Tag „enctype="multipart/form-data" verfügen, um Dateien hochzuladen

Weitere Artikel zum Hochladen von Beispielcodes für die js-Implementierung input type="file" bitte Achten Sie auf die chinesische PHP-Website!