js显示服务器路径下的图片,JS处理文件流(如果是图片,显示在当前页面)

2023-11-16

用ajax请求图片资源,服务器以文件流的形式返回。

1、返回类型需要设置为“blob”,所以需要用原生ajax,不能使用jq(原因:jquery将返回的数据转换为了string,不支持blob类型)(当然,你也可以引入组件拓展jq的能力,我知道的有一个:jquery-ajax-blob-arraybuffer.js);

2、使用FileReader将文件流转换成base64格式;

3.1、然后通过模拟点击a标签下载该文件;

3.2、或者可以设置在img元素的src属性上,在当前页面显示出来。

3.1代码:

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true); // 也可以使用POST方式,根据接口

xhr.responseType = "blob"; // 返回类型blob

// 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑

xhr.onload = function () {

// 请求完成

if (this.status === 200) {

// 返回200

var blob = this.response;

var reader = new FileReader();

reader.readAsDataURL(blob); // 转换为base64,可以直接放入a表情href

reader.onload = function (e) {

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js显示服务器路径下的图片,JS处理文件流(如果是图片,显示在当前页面) 的相关文章

  • Vuex状态管理-mapState的基本用法详细介绍

    使用vuex集中管理状态 Vuex 是一个专为 Vue js 应用程序开发的状态管理模式 它采用集中式存储管理应用的所有组件的状态 并以相应的规则保证状态以一种可预测的方式发生变化 store js vuex的核心管理对象模块 store
  • Mybatis之分页插件 - PageHelper原理讲解

    在讲解PageHelper插件做分页之前先来介绍几种简单的分页方法 方法一 数组方式 先查询出符合条件的所有记录 然后利用list的subList firstIndex lastIndex 来实现分页 List
  • 通过easyui的filebox上传文件

    本篇文章重点分享一下怎么通过easyui的filebox实现文件上传的功能 从前端代码到后端接口都会展示给大家 1 form表单同步上传 传统的文件上传会把
  • Drcom校园网认证系列(一) 抓包

    原文地址 https www iots vip post drc drcom 俗称小地球 广泛用于各大高校的宽带认证 常见包括三个版本 5 2 0 的P D X版 P版就是在普通的PPPOE拨号的基础上添加了一个客户端与服务器通信认证的过程
  • ABAP GN_DELIVERY_CREATE 报错 VL 561

    GN DELIVERY CREATE 去创建内向交货单的时候 报错 VL 561 Essential transfer parameters are missing in record 表示一些必输字段没输入 诸如一些 物料号 单位 等一些
  • Unity 自定义编辑器时让子类继承父类的Inspector显示效果

    官方文档里的 CustomEditor函数 namespace UnityEditor 摘要 Tells an Editor class which run time type it s an editor for public class
  • linux select用法

    Select可以监控多个文件句柄 监控文件内容的变化 比如可读可写状态的改变 利用select可以实现非阻塞而不会让线程挂起 提高系统的运行效率 比如可以同时 监控 键盘输入和鼠标输入 如果键盘有信号 可以去操作键盘 如果鼠标有信号 去处理
  • Codeforces 1454B Unique Bid Auction(模拟)

    Description 题目大意 找到一个序列中唯一且是最小的那个数的下标 感叹我的语言描述真是越来越精炼了 解题思路 算法标签 模拟 记录每个数字出现的次数以及其下标 然后从1开始寻找 第一个找到的数字的下标就是答案 没什么难度 只是不想
  • Mintty(Cygwin)快速定位当前目录

    转发https blog csdn net x iya article details 78553308 方法一 新建批处理文件Cygwin bat E Cygwin bin mintty exe i Cygwin Terminal ico
  • 赛联区块链教育:对区块链技术做个普及

    区块链 比特币 加密货币在你的脑海中吗 您是否正在努力理解区块链的运作方式 您是否正在寻找该系统的学习信息以帮助您入行 下边的介绍帮你建立相关知识框架 区块链 十多年来 这个词出现在互联网 社交媒体 新闻上 并在全球范围内引起了广泛关注 1
  • Android 13 - Media框架(9)- NuPlayer::Decoder

    这一节我们将了解 NuPlayer Decoder 学习如何将 MediaCodec wrap 成一个强大的 Decoder 这一节会提前讲到 MediaCodec 相关的内容 如果看不大懂可以先跳过此篇 原先觉得 Decoder 部分简单
  • CNCF 官方大使张磊:什么是云原生?

    作者 张磊 阿里云容器平台高级技术专家 CNCF 官方大使 编者说 从 2015 年 Google 牵头成立 CNCF 以来 云原生技术开始进入公众的视线并取得快速的发展 到 2018 年包括 Google AWS Azure Alibab
  • 关于使用MSYS2安装mingw-win64下载两组包中出现ERROR导致升级全部失败的解决方案

    MSYS2网站操作 在最后一步阶段出现ERROR错误 导致升级全部失效 即使是多次重复尝试也不能解决 进行如下操作 pacman S mingw w64 x86 64 toolchain pacman S mingw w64 x86 64
  • jmeter实战案例

    一 前言 以前做了个抽奖活动的需求 需要做压测 只是简单帮助测试去做过压测 但没有自己从头到尾做过 最近再次碰到需要做压测 百度了一下使用教程 现在做个记录 以便以后做压测 直接借鉴教程 二 流程 1 启动jmeter 下载jmeter后
  • 阿里云云数据MongoDB版连接

    阿里云MongoDB连接 一 MongoDB Serverless版 1 登录进入阿里云控制台之后在搜索栏搜索mongodb进入MongoDB控制台 2 选择你所购买的资源区域 点击左侧server less实例列表找到自己的资源 如果是刚
  • 代码检查、走查与评审

    桌上检查 桌上检查是一种程序员检查自己的原程序的方法 桌上检查的目的是发现程序中的错误 桌上检查的检查项目主要有检查变量 标号的交叉引用表 检查子函数 宏 函数 等价性检查 常量检查 标准检查 风格检查 比较控制流 选择 激活路径 补充文档
  • 覆盖 Safari、Edge,主流浏览器几乎均已实现 WebGL 2.0 支持

    从 Firefox 到 Safari 所有的主流浏览器现已经全部支持 WebGL 2 0 近日 专注于制定开放标准的行业协会Khronos Group 重磅宣布当下所有主流浏览器均已实现了对WebGL 2 0的支持 简单来看 无需使用插件即
  • 照片的35x45,300dpi怎么弄

    做技术的难免会遇到一些杂活 一个35x45的照片 300dpi 要改为34x39 300dpi的图片 好像不太会 不过这样子弄 叫对方不要用微信发照片 微信强制会把照片改为96dpi 宽高都变了1个像素 因此照片压缩后再让其发过来 收到照片
  • LeetCode 108. 将有序数组转换为二叉搜索树Golang版

    LeetCode 108 将有序数组转换为二叉搜索树Golang版 1 问题描述 给你一个整数数组 nums 其中元素已经按 升序 排列 请你将其转换为一棵 高度平衡 二叉搜索树 高度平衡 二叉树是一棵满足 每个节点的左右两个子树的高度差的

随机推荐

  • 华为OD机试真题-积木最远距离【2023Q1】

    题目描述 小华和小薇一起通过玩积木游戏学习数学 他们有很多积木 每个积木块上都有一个数字 积木块上的数字可能相同 小华随机拿一些积木挨着排成一排 请小薇找到这排积木中数字相同且所处位置最远的2块积木块 计算他们的距离 小薇请你帮忙替她解决这
  • React & JSX 入门

    React JSX 入门 div div
  • 1600*D. Road Map(数学

    解析 记录每个点的父节点和子节点 从新的根节点开始遍历 遍历所有的非父结点即可 include
  • (一)大彩屏幕 进行串口通信

    一 简介 大彩屏幕通过串口收发信息 主要用来显示 装好软件 官网有或找技术人员要 VisualTFT 虚拟串口驱动 USB驱动 1 大彩屏幕来自大彩科技 使用该屏幕时 需要注意获取最新的软件版本 最新的Demo 这一点 你可以直接联系客服或
  • Vue刻度尺组件

    1 安装刻度尺组件 npm install cs ruler 2 在main js中全局引入组件 import CsRuler from cs ruler 刻度尺组件 Vue use CsRuler 3 组件使用
  • C#序列化和反序列化(json)

    一 什么是Json json是存储和交换文本信息的方法 类似xml 但是json比xml更小 更快 j更易于解析 并且json采用完全独立于语言的文本格式 即不依赖于各种编程语言 这些特性使json成为理想的数据交换语言 json使用Jav
  • UE4 命令工具打包

    用cmd进入UE4引擎的目录 Engine Build BatchFiles找到RunUAT bat cmd中输入以下命令 RunUAT BuildCookRun project F VidaUpdater VidaUpdater upro
  • QT 语言的学习 day10 数据库的学习 增删改 (QT 自带的数据库 QSqlDatabase数据库)

    1 基本知识的学习 Qt 提供了 QtSql 模块来提供平台独立的基于 SQL 的数据库操作 这里我们所说的 平台独立 既包括操作系统平台 有包括各个数据库平台 另外 我们强调了 基于 SQL 因为 NoSQL 数据库至今没有一个通用查询方
  • 1分钟让您的.NET WinForm应用程序变成现代互联网浏览器

    目录 前言 一 WebRuntime是什么 二 使用步骤 三 具体案例 总结 前言 让自己的应用拥有对接互联网的能力 应该是绝大多数开发者的愿望 这里给大家推荐一个开源项目 WebRuntime 通过这个项目 开发者可以在完全保留自己应用架
  • ISO/IEC技术标准-RFID

    ISO IEC技术标准规定了RFID有关技术特征 技术参数和技术规范 主要包括ISO IEC 18000 空中接口参数 ISO IEC 10536 密耦合 非接触集成电路卡 ISO IEC 15693 疏耦合 非接触集成电路卡 和ISO I
  • html框架-----标签(上)

    目录 前言 标签简介 1 HTML的基本结构 1 html标签 2 head标签 3 body标签 2 标题标签 3 段落标签 4 文本格式化标签 前言 现在学前端工程师的都很难找工作 懂的都懂了 因为学前端一般去做那些页面可视化处理 而学
  • 微信红包实现原理

    微信红包实现原理 以下内容来源于QCon某高可用架构群聊天记录整理 背景 有某个朋友咨询微信红包的架构 在官方或非官方同学的解释和讨论中得出以下讨论内容 在此期间有多个同学发红包做现网算法测试 抢红包过程 当有人在群里发了一个N人的红包 总
  • js 正则替换隐藏部分身份证或手机号以及隐藏部分名字

    1 手机号隐藏中间4位 var phone 18200002111 phone replace d 3 d d 4 1 2 输出结果 2 身份证隐藏中间数字 2 1兼容尾数后面携带字母的 隐藏身份证中间8位数 param data 传入数据
  • opengles3.0_win10

    前部分的配置主要参考 https blog csdn net mmy545237835 article details 80762150 但是还会出现一系列问题 需要把下载的模拟器文件夹中的 一个文件夹和两个动态链接库放到当前的工程目录下
  • 自动化输出带数据的文件名称

    背景说明 为实现数据统计 输出文件名称中带变化的数据名称 可以进行向量变化的输出 程序说明如下 library readxl library sqldf library openxlsx library dplyr length iris
  • Kubernetes入门Day2 ~ 一步一步手工构建metrics-server 0.5.0 镜像

    i m not only a DBA k8 gcr io异步同步工具配置 一步一步编辑metrics server 0 5 0镜像 1 配置好jq 2 clone 官方metrics server 3 编辑metrics server 0
  • 软件工程和计算机科学与技术的区别在哪?

    计科专业毕业已经从事软件开发多年 说到当初选择这个专业还是遵从父母的意愿 老人家们觉得计算机是个未来的趋势 如果做个计算机的老师岂不是很不错 于是在报考志愿的时候就给选择上了 主要自身也对计算机感兴趣 所以也没有过多的干预 至于学到之后当不
  • 网络技术期末复习~重点考题

    解题思路 标准答案 11 如图所示 网络145 13 0 0 16划分为四个子网N1 N2 N3 N4 它们与路由器R相连的接口分别是m0 m1 m2 m3 R的第五个接口m4连接到互联网路由器 接口地址为1 1 1 1 1 请给出路由器R
  • uniapp 基础知识学习

    uniapp 基础知识学习 uniapp 基础知识学习 uniapp 介绍 https uniapp dcloud io README 有哪些uni app的作品 uni app的社区规模 为什么要去学习uni app 快速体验 功能框架
  • js显示服务器路径下的图片,JS处理文件流(如果是图片,显示在当前页面)

    用ajax请求图片资源 服务器以文件流的形式返回 1 返回类型需要设置为 blob 所以需要用原生ajax 不能使用jq 原因 jquery将返回的数据转换为了string 不支持blob类型 当然 你也可以引入组件拓展jq的能力 我知道的