本文摘自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本地存储的相关讲解
详解HTML5预测取代本地app将成为可能
canvas图片跨域会遇到的问题及解决方法总结
h5的存储方式详解
HTML5单页面手势滑屏切换如何实现
HTML5开始播放当前的音频或视频的方法
详解HTML5 geolocation获取地理位置信息的示例代码分享
HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结
HTML5 css 需不需要js
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 实例讲解H5移动开发Ajax上传多张Base64格式图片到服务器