实例讲解H5移动开发Ajax上传多张Base64格式图片到服务器

1、上传组件

 <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、展示添加上的图片

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、获取图片并上传到服务器

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

好了，就是这个过程，接下来的就交给后端的同学处理了。

h5里js和servlet实现文件上传的实现步骤

H5里的postMessage API图文详解 详细介绍

关于h5中新增的几个背景属性和文本属性

以上就是实例讲解H5移动开发Ajax上传多张Base64格式图片到服务器的详细内容，更多内容请关注技术你好其它相关文章！