广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
本文主要为大家详细介绍了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); } }); } }}登录后复制
好了,就是这个过程,接下来的就交给后端的同学处理了。
相关推荐:
H5里js和servlet实现文件上传的实现步骤
H5里的postMessage API图文详解 详细介绍
关于h5中新增的几个背景属性和文本属性
以上就是实例讲解H5移动开发Ajax上传多张Base64格式图片到服务器的详细内容,更多请关注9543建站博客其它相关文章!
发表评论