angulaireJS+Ionic implémente la fonction de téléchargement d'images mobiles

Cette fois, je vous apporte angularJS+Ionic pour implémenter la fonction de téléchargement d'images mobiles, et angulaireJS+Ionic pour implémenter la fonction de téléchargement d'images mobiles Quelles sont les précautions

. , comme suit C'est un cas pratique, jetons-y un coup d'œil.

Nous rencontrons souvent le problème du téléchargement d'images dans le développement front-end. Il existe de nombreuses solutions en ligne, mais certains plug-ins de téléchargement d'images ont des plug-ins attachés, donc en raison d'un problème de téléchargement d'image, vous pouvez Nous devons introduire d'autres plug-ins. 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.

Une exigence du projet est de télécharger des travaux personnels. Pour implémenter la fonction, de nouveaux objets H5 FormData, XMLHttpRequest et FileReader sont requis. Seuls ces trois objets sont nécessaires, ne parlons pas beaucoup du code.

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. Par conséquent, nous avons besoin d'un FIleReader. objet 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 de 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 de l'encapsulation de liaison bidirectionnelle vue2.x

Npm en tant qu'outil de ligne de commande cli

Promise implémente l'asynchrone

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!