Heim > Artikel > Web-Frontend > js-Implementierung Eingabetyp = „Datei“ Beispielcode zum Hochladen der Datei

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

高洛峰Original: 2016-12-24 17:14:271422Durchsuche

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>

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>

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

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

ok
Zusammenfassung:
Verwenden Sie einen 61b9b53f6d762f7c3b14ccfc7d4eaf40 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 61b9b53f6d762f7c3b14ccfc7d4eaf40 zu steuern.
Verwenden Sie links oben (rechts, unten), um die Position der Schaltfläche zum Durchsuchen auf der rechten Seite von 61b9b53f6d762f7c3b14ccfc7d4eaf40 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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel für den Aufruf der js-Funktion von der untergeordneten Iframe-SeiteNächster Artikel：Beispiel für den Aufruf der js-Funktion von der untergeordneten Iframe-Seite

In Verbindung stehende Artikel

Mehr sehen