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

Plus de bêtises, il suffit de regarder. le code

1. Télécharger 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. photos

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 photos 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);
        }
      });
    }
  }
}

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

À propos de l'encapsulation secondaire de jquery ajax (avec code)

Caractéristiques et caractères tronqués de la question Ajax (tutoriel graphique)

Connaissance de base des messages HTTP et ajax

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!