本文摘自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 canvas基本绘图之绘制阴影效果
HTML5中转义实体字符,元数据, 跳转以及全局属性的图文详解
通过h5实现拍照功能的实例详解
HTML5实现微信播放全屏的方法详解
前端请求ajax的url 路径怎么写
bootstrap与HTML5的区别是什么
处理HTML5新标签的浏览器兼容版问题
h5的块级标签汇总
用js+HTML5实现的小游戏-- 捕鱼达人游戏
HTML5拖放(drag 和 drop)实例讲解
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 实例讲解H5移动开发Ajax上传多张Base64格式图片到服务器