这次给大家带来H5开发时使用Ajax上传Base64格式图片,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);
}
});
}
}
}好了,就是这个过程,接下来的就交给后端的同学处理了。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
冠龙科技手机企业网站管理系统是基于ASP+ACCESS技术开发的电子商务平台,属于全自动化、全智能的在线方式管理、维护、更新的网站管理系统。此系统直接上传到你的网站空间就可以使用了。完全后台操作。后台路径:/admin后台用户及密码均为 admin更新日志:1、增加在线客服系统支持网页在线客服及QQ\旺旺等2、修改产品展示的排序错误3、增加了后台修改前台图片的功能4、网站LOGO及版权信息后台自定
0
以上就是H5开发时使用Ajax上传Base64格式图片的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号