本文摘自PHP中文网,作者小云云,侵删。
本文主要为大家详细介绍了H5移动开发Ajax上传多张Base64格式图片到服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。废话不多说,直接看代码吧
1、上传组件
1 2 3 4 | <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、展示添加上的图片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | viewimg($event) {
var currentObj = event.currentTarget;
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、获取图片并上传到服务器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | var inputs = $( "input.fileupload" );
for ( var i = 0; i < inputs.length; i++) {
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格式图片到服务器的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5播放视频教程
HTML5与web前端有什么区别
HTML5初窥之简介
HTML5与html的区别有哪些?HTML5与html四大区别总结
详细介绍websocket api HTML5规范翻译
HTML5实现拖拽批量上传文件的代码
HTML5 input 类型的详细介绍以及实例代码
在HTML5 canvas中放入图片和保存为图片的方法
如何实现ajax请求?
什么是notifications?HTML5 notifications桌面提醒
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 实例讲解H5移动开发Ajax上传多张Base64格式图片到服务器