js implémentation input type='file' exemple de code de téléchargement de fichier-js tutoriel-php.cn

js implémentation input type='file' exemple de code de téléchargement de fichier

高洛峰

Libérer： 2016-12-24 17:14:27

original

1417 Les gens l'ont consulté

En développement, le téléchargement de fichiers est indispensable. est une balise de téléchargement couramment utilisée, mais elle est moche et le mot de navigation ne peut pas être modifié. ="fichier" />Masquer, cliquez sur d'autres balises (images, etc.) pour réaliser la fonction de téléchargement de fichiers.
Regardez le code :

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

Copier après la connexion

Cependant, dans Firefox et certains navigateurs de version supérieure, les fichiers à télécharger peuvent être obtenus en arrière-plan, tandis que certains navigateurs de version inférieure ne peuvent pas obtenir Request.Files à all
En recherchant l'information, certaines personnes ont dit qu'elle devrait être modifiée comme suit :

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

Copier après la connexion

Un mot-clé return a été ajouté, ce qui améliore beaucoup la compatibilité, mais certains navigateurs ne sont toujours pas faciles à utiliser.
Nous avons constaté que nous pouvons certainement télécharger le fichier en cliquant manuellement sur en arrière-plan
Nous pouvons donc de manière transparente
Modifiez le code comme suit :

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

Copier après la connexion

Quand on clique pour sélectionner l'image, on clique en fait sur impossible de voir Le fichier à télécharger peut également être obtenu en arrière-plan.
ok
Résumé :
Utilisez un avec une opacité de 0 pour couvrir l'étiquette (ou l'image, etc.) que vous souhaitez que l'utilisateur voie, donc que l'utilisateur peut cliquer dessus.
Utilisez width height line-height font-size pour contrôler la taille du bouton Parcourir à droite de .
Utilisez le haut gauche (droite, bas) pour contrôler la position du bouton de navigation sur le côté droit du , qui peut être défini sur une valeur négative.
Utilisez z-index pour définir leur relation de couverture de couche.
Le formulaire doit avoir la balise enctype="multipart/form-data" pour télécharger des fichiers

Plus d'implémentations js input type="file" de téléchargement de fichiers d'exemple de code articles liés S'il vous plaît faites attention au site Web PHP chinois !