使用 jQuery 的 ajax 方法以 blob 形式检索图像

2024-05-12

我最近问了另一个(相关)问题,这导致了这个后续问题:提交数据而不是输入表单的文件 https://stackoverflow.com/questions/17643142/submitting-data-instead-of-a-file-for-an-input-form

通读 jQuery.ajax() 文档(http://api.jquery.com/jQuery.ajax/ http://api.jquery.com/jQuery.ajax/),似乎接受的数据类型列表不包括图像。

我正在尝试使用 jQuery.get(或 jQuery.ajax,如果必须的话)检索图像,将该图像存储在 Blob 中,然后在 POST 请求中将其上传到另一台服务器。目前,由于数据类型不匹配,我的图像最终被损坏(字节大小不匹配等)。

执行此操作的代码如下(它在coffescript中,但应该不难解析):

handler = (data,status) ->
  fd = new FormData
  fd.append("file", new Blob([data], { "type" : "image/png" }))
  jQuery.ajax {
    url: target_url,
    data: fd,
    processData: false,
    contentType: "multipart/form-data",
    type: "POST",
    complete: (xhr,status) ->
      console.log xhr.status
      console.log xhr.statusCode
      console.log xhr.responseText

  }
jQuery.get(image_source_url, null, handler)

我如何才能将此图像作为 blob 检索?


您不能使用 jQuery ajax 来做到这一点,但可以使用本机 XMLHttpRequest。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        //this.response is what you're looking for
        handler(this.response);
        console.log(this.response, typeof this.response);
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();      

EDIT

因此,重新审视这个主题,似乎确实可以使用 jQuery 3 来做到这一点

jQuery.ajax({
        url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
        cache:false,
        xhr:function(){// Seems like the only way to get access to the xhr object
            var xhr = new XMLHttpRequest();
            xhr.responseType= 'blob'
            return xhr;
        },
        success: function(data){
            var img = document.getElementById('img');
            var url = window.URL || window.webkitURL;
            img.src = url.createObjectURL(data);
        },
        error:function(){
            
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<img id="img" width=100%>

or

使用 xhrFields 设置响应类型

    jQuery.ajax({
            url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
            cache:false,
            xhrFields:{
                responseType: 'blob'
            },
            success: function(data){
                var img = document.getElementById('img');
                var url = window.URL || window.webkitURL;
                img.src = url.createObjectURL(data);
            },
            error:function(){
                
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <img id="img" width=100%>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 jQuery 的 ajax 方法以 blob 形式检索图像 的相关文章

随机推荐

  • Paramiko ValueError“p 的长度必须恰好为 1024、2048 或 3072 位”

    我正在尝试使用 Python 脚本连接 SFTP 由于 p 错误 我无法连接 import paramiko client paramiko SSHClient client load system host keys client con
  • OpenXML 距离、大小单位

    OpenXML 中用于指定尺寸或 X Y 坐标的测量单位是什么 推介会 将它们与像素匹配是否有意义 如果是的话 如何将它们转换为像素 GraphicFrame Transform new Transform new Offset X 165
  • Windows:列出并启动与扩展关联的应用程序

    如何确定与特定扩展名 例如 JPG 关联的应用程序 然后确定该应用程序的可执行文件所在的位置 以便可以通过调用 System Diagnostics Process Start 来启动它 我已经知道如何读取和写入注册表 注册表的布局使得以标
  • 如何安装 Miles J 的 cakephp 论坛插件?

    我很确定这是一个蛋糕 1 3 问题 该插件与 2 0 不兼容 我正在尝试为论坛安装 cakephp 的 Miles J 插件 可以在这里找到 http milesj me code cakephp forum http milesj me
  • 判断 Git 提交是否是合并/恢复提交

    我正在编写一个脚本 需要检查特定提交是否是合并 恢复提交 我想知道是否有 git 技巧 到目前为止我想到的 我绝对不想依赖这里的提交消息 是检查HASH 2看看我是否没有收到错误 是否有更好的方法 判断某个东西是否是合并很容易 这是不止一位
  • 如何在 getStaticPaths 内添加 params 值数组

    我有一个页面 其结构如下 read slug number 我想要得到slug每个对应的值number in the getStaticPaths这是代码 export async function getStaticPaths const
  • java数据结构模拟数据树

    我需要帮助定义使用什么方法 我有一个 SOAP 响应 给我一个 xml 文件 我需要在屏幕上显示 3 个相关列表 当您在第一个列表中选择一个项目时 相应的选择将出现在第二个列表中 依此类推 我只对从 xml 流中提取数据后如何有效地组织数据
  • 无法下载 Windows 版 Composer SSL:握手超时

    这是我尝试安装 Windows 版 Composer 时得到的结果 The https getcomposer org versions https getcomposer org versions 无法下载文件 SSL 握手超时 无法启用
  • 如何分析 VSCode 中函数的性能

    我用 C Golang 编写了一个程序 如何找到占用最高 CPU 周期的函数 目的是提高正在执行的程序的性能 2021 年 10 月 金香儿哈娜 https github com hyangah宣布 tweet https twitter
  • 如何使用简历实现一个“一网打尽”的异常处理程序?

    我想知道我怎样才能写一个抓住他们全部应用程序级别的异常处理程序将为用户提供恢复应用程序流程的选项 如果您正在运行 Windows 窗体应用程序 将处理程序添加到Application ThreadException event
  • 如何获取 ios 日期数组中的所有星期日

    我只想要一个数组 它以 NSDate 的形式包含一年中的所有星期一 但速度很快 我在 Objective c 中使用以下代码 但不知道如何在 swift 中使用它 NSDate pickerDate NSDate date NSLog pi
  • 用于带有嵌套子图的图的 r 包? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个用于图形 网络的 r 包 它可以处理嵌套子图 Graphviz 做到了这一点 但只提供可
  • double 类型的静态类成员的常量表达式初始值设定项

    在 C 11 和 C 14 中 为什么我需要constexpr在下面的代码片段中 class Foo static constexpr double X 0 75 而这会产生编译器错误 class Foo static const doub
  • 自动将范围内的值插入表中

    是否可以使用 MySQL 语句自动将值插入表中 即从 30 到 200 这是一个应该执行此操作的存储过程 CREATE PROCEDURE insert range BEGIN DECLARE i INT DEFAULT 30 WHILE
  • 如何将无向图转换为 DAG?

    The 维基页面 http en wikipedia org wiki Directed acyclic graph Relation to other kinds of graphs says 任何无向图都可以通过为其顶点选择总顺序并将每
  • 如何有一个后备路由来捕获backbone.js中的未知页面

    我设置了一组如下所示的路线 routes home home home page home 我想知道的是 如何配置路由 以便如果用户请求未知页面 我可以轻松重定向到静态 404 html 页面 在您的路由器中 例如前两条路由 routes
  • 使用 roslyn 扩展 C# 语法

    我试图在没有 else 情况的情况下实现 return if return value if 因为我只想在条件有效时返回或返回一个值 我知道 有if condition return or if condition return value
  • 当我在 Java 中输入 IP 时无法连接到我的服务器

    好的 我正在尝试学习 Java 客户端 服务器的内容 并且正在浏览教程代码 如下所示 当我将 localhost 更改为我的 IP 时 它会停止工作 请帮忙 编辑 127 0 0 1 似乎也可以工作 但不是我的真实IP Copyright
  • 实体框架代理创建

    我们可以通过使用来停止在上下文构造函数中创建代理 this Configuration ProxyCreationEnabled false 在 EF 4 1 中创建代理有哪些优点和缺点 代理对于两个功能是必需的 延迟加载 导航属性在第一次
  • 使用 jQuery 的 ajax 方法以 blob 形式检索图像

    我最近问了另一个 相关 问题 这导致了这个后续问题 提交数据而不是输入表单的文件 https stackoverflow com questions 17643142 submitting data instead of a file fo