angulaireJS+Ionic télécharge des images sur le terminal mobile (avec code)

Cette fois, je vous apporte angularJS+Ionic pour télécharger des images sur le terminal mobile (avec code). Quelles sont les précautions pour qu'angularJS+Ionic télécharge des images sur le terminal mobile). ? Ce qui suit est un cas pratique, jetons-y un œil.

Dans le développement front-end, nous rencontrons souvent le problème du téléchargement d'images. Il existe de nombreuses solutions en ligne. Cependant, certains plug-ins de téléchargement d'images ont des plug-ins attachés, donc à cause d'une image. problème de téléchargement, vous devrez peut-être Si d'autres plug-ins sont introduits dans le projet, le projet deviendra indescriptible avec le temps, et parfois il y aura des conflits entre les plug-ins, nous pouvons donc écrire nous-mêmes une méthode de téléchargement d'images.

La démo d'aujourd'hui est un projet de compte public mobile WeChat réalisé pour un ami. L'architecture du projet adopte angulaire+ionique, car il est beaucoup plus pratique d'utiliser jQuery sur DOM, mais jQuery est relativement lourd, donc à la fin j'ai choisi d'utiliser le léger. zepto pour gérer le projet dom pour fonctionner.

js :

fonction1 :

$scope.imgList = [];
$scope.setUploader = function () {
  var files = document.getElementById('photo');
  files.click();
  $(files).unbind().on('change',function (e) {
    var file = e.target.value;
    if (!/.(jpg|jpeg|png|GIF|JPG|png)$/.test(file)) {
      common.toast('图片类型必须是jpeg,jpg,png中的一种');
      return false;
    };
    fsubmit();
    readAsBinaryString();
  });
};

fonction2：

function fsubmit() {
  var itemImg = {};
  var form=document.getElementById("form1");
  console.log('form',form)
  var formData=new FormData(form);
  formData.append('wxdesigner_sid',$.fn.cookie('wxdesigner_sid'));
  formData.append('id',$scope.masterInfo.id);
  formData.append('pc','1');
  var oReq = new XMLHttpRequest();
  oReq.onreadystatechange=function(){
    if(oReq.readyState==4){
      if(oReq.status==200){
        var json=JSON.parse(oReq.responseText);
        console.log(json)
        if(json.Success) {
          itemImg = json.Data;
          $scope.imgList=itemImg;
          console.log($scope.imgList)
          $scope.$apply();
          itemImg = {};
        }
      }
    }
  };
  console.log(oReq)
  console.log(formData)
  oReq.open("POST", common.api+"Wxdesigner/Designer/uploadworks");
  oReq.send(formData);
  return false;
};
//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
  //使选择控件不可操作
  file.setAttribute("disabled","disabled");
}

fonction3 :

function readAsBinaryString(){
  var file = document.getElementById('photo').files[0];
  console.log(file)
  var reader = new FileReader();
  //将文件以二进制形式读入页面
  reader.readAsDataURL(file);
  reader.onload=function(f){
    $scope.masterInfo.thumblist.push(f.currentTarget.result)
    console.log($scope.masterInfo)
    $scope.$apply()
  }
}

La couche DOM de l'ensemble du téléchargement de l'image est très simple, un formulaire plus une fonction (fonction1) qui déclenche le formulaire. L'événement de clic de est obtenu dans la fonction1, et un jugement sera effectué lors de la sélection d'une image si la plage des types d'images pris en charge est dépassée, un rappel sera émis.

Appelez ensuite function2 et function3 plus tard.

Obtenez l'objet formulaire dans function2, puis créez un objet FormData, transmettez le formulaire obtenu dans FormData, puis ajoutez quelques paramètres pour télécharger des images. Créez un autre nouveau XMLHttpRequest, puis ouvrez l'interface de requête XHR et send(formData) transmet les paramètres à l'interface.

A ce moment, l'interface est envoyée avec succès.

Les quatre paramètres ici sont les quatre paramètres de formData

L'interface réussit donc.

Il y a un problème ici. Le téléchargement de l'image est écrit avec succès dans la base de données, mais pour le moment, il doit être affiché localement pour l'utilisateur, mais la page Web ne peut pas accéder directement à l'image locale de l'appareil, nous avons donc besoin d'un objet FIleReader. pour lire le fichier image téléchargé en tant que DataURL affiché localement.

Tout d’abord, créez un objet FileReader, puis transmettez l’objet fichier d’entrée obtenu dans la méthode readAsDataURL() de FileReader. Cette méthode lit le fichier en tant que DataURL.

Appelez ensuite la méthode onload de FileReader. Le résultat de cette méthode aura l'URL convertie, afin que nous puissions obtenir cette URL, qui est en fait codée en base64. Puis poussez jusqu'à la fin de la liste des images

Cela résout le problème. Le front-end affiche des images locales et les images sont également écrites dans la base de données. Lorsque la page est à nouveau actualisée, les données de la base de données sont obtenues

Bien sûr, ce n'est qu'une méthode, Les plug-ins de téléchargement d'images mobiles abondent, et il existe même divers plug-ins de téléchargement d'images par glisser-déposer. Cela convient aux fonctions simples de téléchargement d'images dans des projets sans introduire de plug-ins.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée du comportement de défilement de Vue-Router

Particles.js implémente un arrière-plan dynamique de particules animation

Explication détaillée de l'utilisation des méta-informations de routage de Vue-router

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!