Example to explain H5 mobile development Ajax upload multiple Base64 format pictures to the server

This article mainly introduces H5 mobile development Ajax to upload multiple Base64 format pictures to the server in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Without further ado, let’s just look at the code

1. Upload components

##

 <p class="imgbox">
   <img  class="goodsimg lazy"  src="/static/imghwm/default1.png"  data-src="../../assets/addimg.png"    alt="Example to explain H5 mobile development Ajax upload multiple Base64 format pictures to the server" >
   <input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>
 </p>

2. Display the added pictures

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. Get the pictures and upload them to the server

//单张图片上传
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);
        }
      });
    }
  }
}

Okay, that’s it. The rest will be left to the back-end students.

Related recommendations:

Implementation steps of js and servlet to implement file upload in h5

postMessage API diagram in H5 The article explains in detail

About several new background attributes and text attributes in h5

The above is the detailed content of Example to explain H5 mobile development Ajax upload multiple Base64 format pictures to the server. For more information, please follow other related articles on the PHP Chinese website!