Maison > Article > interface Web > js implémentation input type="file" exemple de code de téléchargement de fichier

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

高洛峰original: 2016-12-24 17:14:271422parcourir

En développement, le téléchargement de fichiers est indispensable. 61b9b53f6d762f7c3b14ccfc7d4eaf40 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>

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>

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 61b9b53f6d762f7c3b14ccfc7d4eaf40 en arrière-plan
Nous pouvons donc de manière transparente 61b9b53f6d762f7c3b14ccfc7d4eaf40
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>

Quand on clique pour sélectionner l'image, on clique en fait sur 61b9b53f6d762f7c3b14ccfc7d4eaf40 impossible de voir aa0e8e73488ab17723a59533e905867f Le fichier à télécharger peut également être obtenu en arrière-plan.
ok
Résumé :
Utilisez un 61b9b53f6d762f7c3b14ccfc7d4eaf40 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 61b9b53f6d762f7c3b14ccfc7d4eaf40.
Utilisez le haut gauche (droite, bas) pour contrôler la position du bouton de navigation sur le côté droit du 61b9b53f6d762f7c3b14ccfc7d4eaf40, 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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple d'appel de la fonction js à partir de la page sous-parente iframeArticle suivant：Exemple d'appel de la fonction js à partir de la page sous-parente iframe

Articles Liés

Voir plus