Example to explain H5 mobile development Ajax upload multiple Base64 format pictures to the server-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

小云云

Dec 26, 2017 am 11:04 AM

ajax html5 develop

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>

Copy after login

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

Copy after login

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

Copy after login

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 of this Website

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