Maison >interface Web >js tutoriel >Faites attention aux détails lors de la mise en œuvre d'un téléchargement simple avec des compétences html5+javascript_javascript

Faites attention aux détails lors de la mise en œuvre d'un téléchargement simple avec des compétences html5+javascript_javascript

WBOYoriginal: 2016-05-16 15:04:532312parcourir

Enregistrez brièvement quelques pièges dans certains codes lors du téléchargement H5 ce matin

1. Affichage

Parce que le téléchargement de fichiers front-end doit passer par le formulaire, et qu'ajax ne peut pas être utilisé dans ce cas, mettre une entrée de type fichier dans une page mobile n'a vraiment pas l'air très bien, comme indiqué ci-dessous, c'est très. frustrant, n'est-ce pas

J'ai cherché une solution. Certaines personnes sur PC remplacent cette entrée par Flash et utilisent la bibliothèque d'outils jquery telle que uploadify pour le faire. Cependant, la plupart des navigateurs mobiles ne prennent pas en charge Flash. Donc, la méthode finale consiste à utiliser le formulaire de formulaire, il suffit de définir la transparence du formulaire et de l'entrée sur 0, de sorte qu'eux et le contenu à afficher soient dans un div en même temps, et que le contenu affiché puisse ressembler à comme tu veux. Le code est le suivant :

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <title></title>
  <style>
   div{width: 100%;}
   .logo img{display:block; margin:0 auto;}
   .upload{position: relative;width: 80px;height: 18px;line-height: 18px;background: #2fc7c9;text-align: center;
     color: #FFF;padding: 0px 5px;-webkit-border-radius: 2px;border-radius: 2px;
     margin: 0 auto;
     }
   .upload form{width:100%;position:absolute; left:0; top:0;opacity:0; filter:alpha(opacity=0);}
   .upload form input{width: 100%;}
  </style>
 </head>
 <body>
  <div class="logo">
   <img src="img/1.jpg" />
  </div>
  <div class="upload">
   <p>上传图片</p>
   <form>
    <input type="file" />
   </form>
  </div>
 </body>
</html>

Comme le montre l'image, il sera affiché dans la balise p de "Télécharger l'image". Un clic dessus aura pour effet de sélectionner le fichier

2.Code JS

Ce que j'ai écrit ici est assez simple, j'ai juste utilisé les fonctions de base de h5 upload

Le code html est le suivant. L'action est le chemin à demander. Ce que je fais ici est de télécharger et de modifier l'avatar lorsque le fichier change. L'attribut name de la balise d'entrée ne peut pas être omis. interface back-end

<form id="uploadForm" enctype="multipart/form-data" method="post" action="XXXXXX">
  <input type="file" name="imageFile" id="imageFile" onchange="fileSelected()" />
</form>

var iMaxFilesize = 2097152; //2M
window.fileSelected = function() {
 var oFile = document.getElementById('imageFile').files[0]; //读取文件
 var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
 if (!rFilter.test(oFile.type)) {
  alert("文件格式必须为图片");
  return;
 }
 if (oFile.size > iMaxFilesize) {
  alert("图片大小不能超过2M");
  return;
 }
 var vFD = new FormData(document.getElementById('uploadForm')), //建立请求和数据
  oXHR = new XMLHttpRequest();
 oXHR.addEventListener('load', function(resUpload) {
  //成功
 }, false);
 oXHR.addEventListener('error', function() {
  //失败
 }, false);
 oXHR.addEventListener('abort', function() {
  //上传中断
 }, false);
 oXHR.open('POST', actionUrl);
 oXHR.send(vFD);
};

Les détails déterminent le succès ou l'échec, alors prenez tout au sérieux.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

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：Une brève analyse des problèmes de compatibilité des navigateurs dans les compétences JavaScript_javascriptArticle suivant：Une brève analyse des problèmes de compatibilité des navigateurs dans les compétences JavaScript_javascript

Articles Liés

Voir plus