Utilisez Ajax pour télécharger des images au format Base64 pendant le développement H5

Cette fois, je vais vous présenter quelles sont les précautions pour utiliser Ajax pour télécharger des images au format Base64 lors du développement de H5. Jetons un coup d'œil à ce qui suit.

Pas d'autres bêtises, regardons simplement le code

1 Téléchargez le composant

 <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 l'image et téléchargez-la 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: 'POST',
        url: 'http://10.145.0.05/goods/addGoodsBase64',
        dataType: "json",
        data: {
          "base64": event.result,
        },
        success: function(data) {
          console.log(data);
        }
      });
    }
  }
}

D'accord, ça y est, le reste sera géré par les étudiants du back-end.

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 :

Comment configurer Google Chrome pour prendre en charge les requêtes AJAX du protocole de fichier

AJAX sans actualiser Check le nom d'utilisateur saisi

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!