这篇文章主要为大家详细介绍了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);
}
});
}
}
}
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
关于二次封装jquery ajax办法（附有代码）
ajax的特性及乱码问题（图文教程）
http报文及ajax基础知识
以上就是h5移动开发ajax上传多张base64格式图片到服务器的详细内容。