js怎么显示服务器图片,原生JS上传图片接收服务器端图片并且显示图片(主要描述blob类型)...
1.了解后端处理图像的方式
一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使用)
blob (binary large object)二进制大对象
2.第一种前端直接将存储路径赋值给src属性即可轻松显示
前端发起get请求后,后端可直接返回图片在服务器中地址
3.第二种以二进制流传输图片与显示图片详解
form表单的Input标签的file类型,提供了上传文件的功能,通过此类型,可以上传文件到服务器formData对象可以异步上传二进制文件formData文档FileReader对象可以异步读取二进制文件FileReader文档
1.HTML结构
2.js定义个上传图片的函数,上传成功可以在本地显示
function uploadImg() {
var fileObj = document.getElementById(“FileUpload”).files[0]; // js 获取文件对象
var reads = new FileReader();
if (typeof (fileObj) == “undefined” || fileObj.size <= 0) {//判断有没有选择图片
$.messager.alert(‘提示’, “请选择图片”);
return;
}
var formFile = new FormData();
formFile.append(“action”, “UploadVMKImagePath”);
formFile.append(“file”, fileObj);//添加字段和对应的值
var gUpImgUrl = constructURL(upApiKey, “upload”);//这步为构造访问地址
var data = formFile;
$.ajax({
url: gUpImgUrl,
data: data,
type: “Post”,
dataType: “json”,
headers: {//token验证没有不加
token: sessionStorage.getItem(“token”),
},
cache: false,//上传文件无需缓存
processData: false,//用于对data参数进行序列化处理 这里必须false
contentType: false, //必须
success: function (result) {
$.messager.alert(‘提示’, “上传成功”);
if (result.code == 0) {
//这里为你你成功后的回调,可以传成功后显示在本地
reads.readAsDataURL(fileObj);//把文件对象读成base64,读完直接放到src中
reads.onload = function (e) {
document.getElementById(id).src = this.result;
};
}
},
});
}
3.从服务器获取二进制流的图片文件,并显示
本地的文件信息可以直接fileReader读成base64显示,而后端取得的二进制流blob不一定可以可以使用createObjectURL来读成临时的url createObjectURL文档
function getImg(param, id) {//这里没有用ajax当时用ajax出现了问题就用了原生发请求
var _url;
_url = RequestUrl.constructURL(“CUSTOMERS”, “getimg”, param);
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, _url, true);
xhr.responseType = “blob”;
xhr.setRequestHeader(“token”, sessionStorage.getItem(“token”));
xhr.onload = function () {
if (this.status == 200) {
var blob = this.response;
。。。//处理业务逻辑
var img = document.getElementById(id);
img.onload = function (e) {// 元素的onload 事件触发后将销毁URL对象, 释放内存。
window.URL.revokeObjectURL(img.src);
};
// 浏览器允许使用URL.createObjectURL()方法,针对 Blob 对象生成一个临时 URL。
// 这个 URL 以blob:开头,表明对应一个 Blob 对象。
img.src = window.URL.createObjectURL(blob);
}
};
xhr.send();
};
本文由乐趣区整理发布,转载请注明出处,谢谢。
js怎么显示服务器图片,原生JS上传图片接收服务器端图片并且显示图片(主要描述blob类型)...相关推荐
- js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
- Java接受blob类型图片_原生JS上传图片接收服务器端图片并且显示图片(主要描述blob类型)...
1.了解后端处理图像的方式 一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中 二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使 ...
- 原生JS上传图片接收服务器端图片并且显示图片(主要描述blob类型)
1.了解后端处理图像的方式 一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中 二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使 ...
- 原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下 实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...
- vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- js异步请求php数据,原生JS发送异步数据请求实例详解
这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到 ...
- js 写html代码编辑器,原生JS写一个功能强大的编辑器
因为一个同学,要做一个能加入图片的留言板功能,类型与QQ空间留言板和百度贴吧发帖的那种形式,同时在网上找了找发生网上对这方面的交流很少,所以发表这篇文章抛砖引玉,希望能帮助广大的学习者,也同时希望大佬 ...
- class 原生js获取父元素_原生js获取class
//使用原生js时,通过class名称就可以得到相应的class名称标签组封装的函数 //定义一个函数getClass(oParent,aClass); function getClass(oPare ...
- 原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
- js获取当前农历年月 原生js实现公历转农历
原生js实现公历转农历(转载) 网上原生JS实现公历转农历的代码参差不齐,个人经过项目实践后发现有个博主的写的很好使用起来也很方便,于是一起分享给大家. 原博主的代码是在vue框架下写的,具体如下: ...
最新文章
- MICRA OPENCART 自适应主题模板 ABC-0678-02
- ultraedit中换行键的替换
- 计算机应用基础考证理论知识,《计算机应用基础》考试大纲
- Java开发人员访谈的MindMap
- solor mysql_solr 同步 mysql
- 数据转移-从MySQL到Hive
- Linux学习笔记-用vc编写Liunx代码(vc只充当编辑器的功能)
- 信息学奥赛C++语言: 计算两个数的最大公约数
- 【书单】推荐几本AI好书
- 2013年想学的东西。。。
- [转]vs2003,安装程序检测到另一个程序要求计算机重新启动
- cargo 使用国内源镜像,引用 substrate 的 Contracts Pallet Crate 编译错误
- weblogic + apache 负载均衡与Session复制
- 从零开始搭二维激光SLAM --- 文章索引
- Unity 3D ScrollView控件(滚动视图)
- adadelta算法_自适应学习率调整:AdaDelta
- cpu超线程优缺点_超线程对游戏性能会影响?
- 今有物不知其数三三数之JAVA_今有物不知其数.三三数之剩二.五五数之剩三.七七数之剩二.问物几何? 题目和参考答案——青夏教育精英家教网——...
- u盘中毒文件为html文档,u盘中毒文件被隐藏了?教你如何快速恢复隐藏文件
- 在做微信公众号网页授权的时候,有时会重定向两次网页(302问题)