Explication détaillée des exemples de téléchargement d'images HTML5 dans Android-js tutoriel-php.cn

Explication détaillée des exemples de téléchargement d'images HTML5 dans Android

零下一度

Libérer： 2017-06-26 13:31:27

original

2356 Les gens l'ont consulté

Environnement de la plateforme d'application : vue Web Android ;

Points techniques impliqués :

(1) : Lors du développement, la vue Web Android clique par défaut sur la sélection de fichiers. et la photographie avec appareil photo ne peut pas être appelée (les autres appareils iOS et autres navigateurs n'ont pas ce problème), et les étudiants en développement Android doivent ajuster le code

(2) Comment afficher l'image sur la page après avoir cliqué sur ; le sélectionner ? De nombreux développeurs obtiennent probablement cette valeur directement, ce qui est faux et irréalisable. Il existe deux API disponibles, new FileReader et window.URL.createObjectURL (optimal)

　L'implémentation du nouveau FileReader est la suivante :

 
 upload

Copier après la connexion

Dans la vue Web Android actuelle, la vitesse de lecture et d'écriture est assez lente, non recommandée

//--------------- ; - ------------------------------------------------- - -----------------------------

window.URL.createObjectURL est implémenté comme suit :

<input type="file" name="" id="j-file">
 <img src="" id=&#39;j-img&#39; alt="" width="100%">
 <button id=&#39;j-btn&#39;>upload</button>
 <script type="text/javascript">
  var o_file = document.getElementById('j-file'),
      o_btn = document.getElementById('j-btn'),
      o_img = document.getElementById('j-img');

  o_file.addEventListener('change',function(event){      var file = event.target.files[0];      if(!file) return;      var url = window.URL.createObjectURL(file);      if(/image/.test(file.type)){
          o_img.setAttribute('src',url);
      }else{
          console.log('请选择图片');
      }
  },false);

  o_btn.onclick = function(){      var data = new FormData();
      data.append('file_a',o_file.files[0]);
      data.append('text','test');
        console.log(data);
  } </script>

Copier après la connexion

L'avantage de cette technologie est que vous n'avez pas besoin de lire le contenu du fichier en javascript, mais d'utiliser le fichier contenu directement, ce qui est très rapide ;

(3) Comment transmettre les données d'image au serveur via l'objet XHR ? new FormData() fournit une implémentation pour sérialiser les formulaires et créer des données dans le même format que le formulaire (la transmission XHR n'a pas besoin de définir explicitement l'en-tête de la requête sur l'objet xhr (s'il s'agit d'un téléchargement d'image dans le formulaire). enctype doit définir multipart/form -data), XHR peut identifier automatiquement la méthode d'instance .append(key, value) pour personnaliser les données

L'exemple de code complet est le suivant :

<input type="file" name="" id="j-file">
 <img src="" id=&#39;j-img&#39; alt="" width="100%">
 <button id=&#39;j-btn&#39;>upload</button>
 <script type="text/javascript">
  var o_file = document.getElementById('j-file'),
      o_btn = document.getElementById('j-btn'),
      o_img = document.getElementById('j-img'),
      target_file = null;

  o_file.addEventListener('change',function(event){      var file = event.target.files[0];      if(!file) return;
      target_file = file;      var url = window.URL.createObjectURL(target_file);      if(/image/.test(target_file.type)){
          o_img.setAttribute('src',url);
      }else{
          console.log('请选择图片');
      }
  },false);

  o_btn.onclick = function(){      if(!target_file) return;      //数据处理  var data = new FormData();
      data.append('key',target_file);    
      var xhr = new XMLHttpRequest();      if(xhr.upload){
        xhr.upload.addEventListener("progress", function(e){          var loaded = e.loaded;    //已经上传大小情况   var tot = e.total;      //附件总大小   var per = Math.floor(100*loaded/tot);  //已经上传的百分比           console.log(per+'%');//进度        }, false);
      }
    
      xhr.onreadystatechange = function(e) {          if (xhr.readyState == 4) {if (xhr.status >=200&&xhr.status<300||xhr.status==304) {//上传成功                             }
          }
      }; 
      xhr.onloadend = function(){//无论失败或成功      }
      xhr.onerror = function(){          
          //网络失败      }      // 开始上传      xhr.open("POST",'上传地址', true); 
      xhr.send(data); 
  } </script>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!