Use Ajax to upload Base64 format images during H5 development

This time I will bring you the precautions on using Ajax to upload Base64 format images when developing H5. The following is a practical case. Let’s take a look.

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

1. Upload components

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

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to configure Google Chrome to support AJAX requests of the file protocol

AJAX without refreshing Check the entered user name

The above is the detailed content of Use Ajax to upload Base64 format images during H5 development. For more information, please follow other related articles on the PHP Chinese website!