Exemple pour expliquer le développement mobile H5. Ajax télécharge plusieurs images au format Base64 sur le serveur.

Cet article présente principalement le développement mobile H5 Ajax pour télécharger en détail plusieurs images au format Base64 sur le serveur. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Sans plus tarder, regardons simplement le code

1. Téléchargez les composants

 <p class="imgbox">
   <img class="goodsimg" src="../../assets/addimg.png">
   <input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>
 </p>

.

2. Afficher les images ajoutées

viewimg($event) {
   //获取当前的input标签
   var currentObj = event.currentTarget; 
   //找到要预览的图片img标签，亦可动态生成
   var img = currentObj.parentNode.children[0]; 
   setImagePreview(currentObj, img);

   function setImagePreview(docObj, imgObjPreview) {
     if (docObj.files && docObj.files[0]) {
        imgObjPreview.style.display = 'block';
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
  }
}

3. Obtenez les images et téléchargez-les sur le serveur

//单张图片上传
var inputs = $("input.fileupload");
for (var i = 0; i < inputs.length; i++) {
  //图片转base64上传
  var file = inputs[i].files;
  if (file[0]) {
    var reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.onload = function(e) {
   var event = this;
   console.log(event.result);
      $.ajax({
        type: &#39;POST&#39;,
        url: &#39;http://10.145.0.05/goods/addGoodsBase64&#39;,
        dataType: "json",
        data: {
          "base64": event.result,
        },
        success: function(data) {
          console.log(data);
        }
      });
    }
  }
}

D'accord, c'est tout. Le reste sera laissé aux étudiants du back-end.

Recommandations associées :

Étapes d'implémentation de js et du servlet pour implémenter le téléchargement de fichiers dans h5

Diagramme de l'API postMessage dans H5 L'article explique en détail

À propos de plusieurs nouveaux attributs d'arrière-plan et attributs de texte dans h5

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!