这篇文章主要为大家详细介绍了H5移动开发Ajax上传多张Base64格式图片到服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
废话不多说,直接看代码吧
1、上传组件
<div class="imgbox">
<img class="goodsimg" src="../../assets/addimg.png">
<input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>
</div>
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移动开发Ajax上传多张Base64格式图片到服务器
基础教程推荐
猜你喜欢
- Ajax实现简单下拉选项效果【推荐】 2022-12-28
- 【vue】三种获取input值的写法 2023-10-08
- ajax异步加载图片实例分析 2022-12-18
- AJAX实现数据的增删改查操作详解【java后台】 2023-02-23
- 使用HTML5中postMessage知识点解决Ajax中POST跨域问题 2022-10-17
- JavaScript函数this指向问题详解 2023-08-12
- Ajax实现关键字联想和自动补全功能及遇到坑 2023-02-23
- vue在install时node-sass@4.14.1 postinstall:node scripts/build.js错误解决 2023-07-09
- JavaScript开发简单易懂的Svelte实现原理详解 2023-08-12
- html网页中使用希腊字母的方法 2022-09-21
