Maison > interface Web > Tutoriel H5 > le corps du texte

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

小云云
Libérer: 2017-12-26 11:04:26
original
2450 Les gens l'ont consulté

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>
Copier après la connexion
.

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 = &#39;block&#39;;
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
  }
}
Copier après la connexion

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);
        }
      });
    }
  }
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!