原生JS上传图片接收服务器端图片并且显示图片(主要描述blob类型)
1.了解后端处理图像的方式
一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中
二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使用)
blob (binary large object)二进制大对象
2.第一种前端直接将存储路径赋值给src属性即可轻松显示
前端发起get请求后,后端可直接返回图片在服务器中地址
<img src="https://profile.csdnimg.cn/3/D/B/1_qq_42518647" class="img" alt="" >
3.第二种以二进制流传输图片与显示图片详解
form表单的Input标签的file类型,提供了上传文件的功能,通过此类型,可以上传文件到服务器
formData对象可以异步上传二进制文件formData文档
FileReader对象可以异步读取二进制文件FileReader文档
1.HTML结构
<input type="file" name="FileUpload" id="FileUpload">
<input value="上传图片" type="button" id="btn_uploadimg" onclick="uploadImg()">
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参数进行序列化处理 这里必须falsecontentType: 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上传图片接收服务器端图片并且显示图片(主要描述blob类型)相关推荐
- Java接受blob类型图片_原生JS上传图片接收服务器端图片并且显示图片(主要描述blob类型)...
1.了解后端处理图像的方式 一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中 二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使 ...
- 织梦网站上传服务器不显示图片,织梦网站图片不显示图片
织梦网站图片不显示图片 内容精选 换一换 在"文章列表"插件中,检查"设置 > 列表数目"的"显示文章条数"和"显示分页&q ...
- 如何访问本地服务器图片不显示,如何访问云服务器的图片不显示图片
如何访问云服务器的图片不显示图片 内容精选 换一换 鲲鹏CentOS 7和中标麒麟NKASV 7云服务器安装图形化界面后,远程连接云服务器鼠标不可用.X86云服务器使用了cirrus虚拟显卡,鲲鹏云服 ...
- html背景图片只显示一张图片,img只显示图片一部分 或 css设置背景图片只显示图片指定区域(示例代码)...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- html如何把图片在背景图一半,img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- 使用Python调用opencv学习(-)打开图片,显示图片
使用Python调用opencv学习(-)打开图片,显示图片 第一步是读取图片是用cv2.imread 第一个参数是图片的路径可以是绝对路径也可以是相对路径.第二个参数代表读取图片的格式 cv2.IM ...
- css 设置背景图一半_img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- php访问服务器上图片不显示不出来,php显示云服务器上图片不显示图片
php显示云服务器上图片不显示图片 内容精选 换一换 初次使用AppCube,您可以通过阅读本入门,初步了解AppCube.建议您跟随文档,创建实例应用,在实操的过程中逐步学习AppCube.AppC ...
- php验证是否图片,php验证码图片不显示图片怎么办
php验证码图片不显示图片的解决办法:首先检查php是否安装gd扩展:然后在php目录下找到php.ini文件:最后将文件编码方式改为utf-8无DOM格式,并在header前清除缓存即可. PHP图 ...
最新文章
- 浅谈压缩感知(三十一):压缩感知重构算法之定点连续法FPC
- JMS的两种消息模型(Point-to-Point(P2P)和Publish/Subscribe(Pub/Sub))应用举例
- Linux磁盘管理1
- Python四大金刚之二:字典
- ubuntu16.04下安装mysql详细步骤
- 机器学习基石12-Nonlinear Transformation
- 商业创业融资计划书PPT模板
- 个人网页制作 大学生个人网页设计 个人网站模板 简单静态HTML个人网页作品 HTML+CSS+JavaScript
- LTE网络架构和协议栈
- 重磅 | 谱尼测试圆满承办化妆品生产企业研学班
- android phone 模块分析
- AWash: Handwashing Assistance for the Elderly with Dementia via Wearables
- 科研写作——常见句式(一)
- Android10无法访问根目录文件解决
- 互联网+国家战略-整理
- python中级第九课--模块和包(小白piao分享)
- 监控系统为什么要加流媒体服务器,视频监控系统为什么要使用流媒体服务器做视频分发?...
- 什么是网络号,主机号,主机地址,网络地址,主机地址,子网号,子网地址
- iOS 自动布局报错:Unable to simultaneously satisfy constraints.
- 联想拯救者R720-15ikbn安装黑苹果Mac Catalina 10.15.3
热门文章
- WebNumericEdit
- s3c2410开发环境建立
- 基于matlab 求多边费马点,POJ2420(求多边形费马点) | 学步园
- 机器人学习--Carnegie Mellon University 认知机器人学课程
- MRT(MODIS Reprojection Tool) 提取数据
- C语言 | C语言中的输出函数:printf()
- 华北理工大学815c语言程序设计,2017年华北理工大学信息工程学院815C程序设计考研冲刺密押题...
- SQLite学习手册(开篇)
- 计算机设备全年销量excel,计算机二级MS-OFFICE考试EXCEL题型汇总附答案.pdf
- html文件 运行php文件路径问题,HTML_基础 HTML之目录问题(相对路径和绝对路径区别),相对路径-以引用文件之网页所 - phpStudy...