Home  >  Article  >  Web Front-end  >  Example to explain H5 mobile development Ajax upload multiple Base64 format pictures to the server

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

小云云
小云云Original
2017-12-26 11:04:262462browse

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" 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 = &#39;block&#39;;
        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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn