您现在的位置是:网站首页> 编程资料编程资料
H5移动开发Ajax上传多张Base64格式图片到服务器_AJAX相关_
2023-05-25
229人已围观
简介 H5移动开发Ajax上传多张Base64格式图片到服务器_AJAX相关_
废话不多说,直接看代码吧
1、上传组件
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); } }); } } } 好了,就是这个过程,接下来的就交给后端的同学处理了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 基于Ajax的formData图片和数据上传_AJAX相关_
- 原生ajax瀑布流demo分享(必看篇)_AJAX相关_
- 快速获取Ajax通信对象的方法_AJAX相关_
- Ajax上传文件进度条Codular_AJAX相关_
- 解决spring mvc 返回json数据到ajax报错parseerror问题_AJAX相关_
- Ajax实现动态加载数据_AJAX相关_
- 前端ajax的各种与后端交互的姿势_AJAX相关_
- 重写 ajax 实现 session 超时跳转到登录页面实例代码_AJAX相关_
- Ajax配合Spring实现文件上传功能代码_AJAX相关_
- Ajax的简单实用实例代码_AJAX相关_

