如何在没有 FileReader 的情况下从 Blob 和 File 对象创建 ArrayBuffer 和数据 URI?

2024-02-02

这个问题与以下相关并受到启发如何在旧浏览器(例如 Safari 5.1.4)中上传 https://stackoverflow.com/questions/38193605/how-to-updoad-in-old-browsers-ex-safari-5-1-4

给定一个<input type="file">元素具有files属性包含File继承自的对象Blob,是否可以创建一个ArrayBuffer并转换ArrayBuffer to a data URI from a Blob or File不使用对象FileReader?

迄今为止尝试过的方法有

  • 创建一个模拟WebSocket with .binaryType set to "arraybuffer", 创建一个MessageEvent with event.data set to File目的;结果是File对象于onmessage handler

  • 设定原型File to ArrayBuffer, Uint8Array;结果是Uncaught TypeError: Method ArrayBuffer.prototype.byteLength called on incompatible receiver #<ArrayBuffer>(), Uncaught TypeError: Method get TypedArray.prototype.byteLength called on incompatible receiver [object Object]()

  • set File at FormData对象,尝试将请求正文发布到<iframe>,诚然,构思不周全;结果Bad Request at plnkr http://plnkr.co/edit/Ca7pNsmVhXpv8Us5v8hE?p=preview

预期结果:转换Blob and File反对TypedArray然后到data URL https://www.rfc-editor.org/rfc/rfc2397,或直接到data URL

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <form method="get" entype="multipart/form-data" target="binaryFrame">
    <input id="#avatar" type="file" name="file" />
    <input type="submit" />
  </form>
  <iframe name="binaryFrame"></iframe>
  <script>
    var input = document.querySelector("input[type=file]");
    input.addEventListener("change", handleFiles, true);
    // see http://jsfiddle.net/adamboduch/JVfkt/
    var sock = new WebSocket("ws://mock");
    sock.binaryType = "arraybuffer";
    sock.onerror = function(e) {
        console.log("sock error", e); // ignore, here
      }

    sock.onmessage = function(e) {
      console.log("socket message", e.data, e.data instanceof ArrayBuffer);
    };

    function handleFiles(evnet) {
      var file = event.target.files[0];
      sock.dispatchEvent(new MessageEvent("message", {
        data: file
      }));
      var data = new FormData();
      data.append("file", file);
      document.forms[0].action = data;
    }
  </script>
</body>

</html>

也可以看看使用 javascript 和 websockets 显示 blob 中的图像 https://stackoverflow.com/questions/11089732/display-image-from-blob-using-javascript-and-websockets , 如何在 JavaScript 中将字符串编码为 Base64? https://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript/;有趣的是,讽刺的是,我现在问类似的问题https://stackoverflow.com/questions/34302231/is-there-any-way-to-convert-the-file-to-an-arraybuffer-without-filereader-api https://stackoverflow.com/questions/34302231/is-there-any-way-to-convert-the-file-to-an-arraybuffer-without-filereader-api ; Blob .slice() method https://w3c.github.io/FileAPI/#slice-method-algo , FileReader .readAsDataURL() method https://w3c.github.io/FileAPI/#readAsDataURL


我只是把它放在这里:

var input = document.querySelector("input[type=file]");
input.addEventListener("change", handleFiles, true);

// for url
window.URL = window.URL || window.webkitURL;

function handleFiles(evnet) {
  var file = event.target.files[0];
  document.querySelector('iframe')
    .setAttribute('src', window.URL.createObjectURL(file));
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <form method="get" entype="multipart/form-data" target="binaryFrame">
    <input id="#avatar" type="file" name="file" />
    <input type="submit" />
  </form>
  <iframe name="binaryFrame"></iframe>
</body>
</html> 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在没有 FileReader 的情况下从 Blob 和 File 对象创建 ArrayBuffer 和数据 URI? 的相关文章

  • 我可以动态创建/销毁 Vue 组件吗?

    因此 我正在创建一个相当复杂的 Vue 应用程序 它从后端 API 获取数据并将其显示在前端 具体取决于用户选择的过滤器 它的默认设置是立即显示所有内容 然后一旦用户选择过滤器 它就会拉出不具有这些属性的 卡片 组件 直到今天 一切都很顺利
  • React Native:不透明视图内的透明视图

    我想用不透明框架和透明中心显示相机的视图 就像图片中的一样 黑色部分是相机的视图 我正在寻找具有纯反应本机组件的解决方案 没有额外的库 例如https github com gilbox react native masked view h
  • 如何使用 JavaScript 选择预节点/块中的文本?

    我了解不允许 JS 将任意文本复制到剪贴板背后的安全原因 但是是否有一种方法可以通过单击按钮来选择预节点中的文本 类似于 select 函数在输入中的工作方式 我不是在寻找复制到剪贴板的 jQuery 插件 我只想突出显示预块中的文本 以便
  • Angularjs 完整日历不显示事件

    我正在用那个https github com angular ui ui calendar https github com angular ui ui calendar在 Angularjs 中使用 FullCalendar 它显示日历并
  • 在动态创建的元素上添加事件监听器[重复]

    这个问题在这里已经有答案了 是否可以向所有动态生成的元素添加事件侦听器 Javascript 我不是页面的所有者 因此我无法以静态方式添加侦听器 对于页面加载时创建的所有元素 我使用 doc body addEventListener cl
  • 在 setInterval / setTimeout 中使用变量作为时间[重复]

    这个问题在这里已经有答案了 这是一个示例情况 var count time 1000 setInterval function count 1 time 上面的代码会将 count 变量加 1 即 1000 毫秒 看来 setInterva
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • Cosmos DB Mongo API 如何管理“请求率很大”情况

    我有以下代码 async function bulkInsert db collectionName documents try const cosmosResults await db collection collectionName
  • 为什么我们使用 SpreadsheetApp.flush()?

    我的理解是 flush https developers google com apps script reference spreadsheet spreadsheet app flush有助于在功能发生时执行这些功能 而无需将它们捆绑在
  • JavaScript:常量属性

    在javascript中 我可以将对象的属性声明为常量吗 这是一个示例对象 var XU Cc Components classes or function aXU this Cc Components classes var XU new
  • setInterval() 在用户离开选项卡时暂停?

    javascript 中是否有任何方法的行为类似于 setInterval 并且当用户离开选项卡时停止并在用户再次进入选项卡时恢复 您可以使用以下方法创建自己的 API可见性API https developer mozilla org e
  • 类型“void”不可分配给类型“((event:MouseEvent) => void) |不明确的'

    import as React from react import App css import PageTwo from components PageTwo export interface IPropsk data Array
  • put方法中的Angularjs文件上传不起作用

    我有一个简单的待办事项应用程序 我试图在其中上传照片和单个待办事项 现在我已经创建了这个工厂函数来负责待办事项的创建 todosFactory insertTodo function todo return http post baseUr
  • 有没有办法伪造同步 XHR 请求?

    我正在使用 Emscripten 系统将一堆 C 代码移植到 Javascript C 代码有很多调用fopen这是一个同步 IO 调用 在 Emscripten 中 我们使用对本地资源的 XHR 请求来模拟这一点however 在 Fir
  • JavaScript 中的实时摩尔斯电码转换器

    在看到谷歌关于莫尔斯电码 gmail 的愚人节笑话后 我想我应该尝试用 javascript 创建一个实时莫尔斯电码转换器 我正在使用正则表达式和替换将莫尔斯电码更改为字符 例如 replace g a replace g r 我遇到的问题
  • JavaScript 提升解释

    下面的片段有什么区别 var a 0 function b a 10 return function a b console log a gt 10 and var a 0 function b a 10 return function a
  • Outlook 加载项,无法读取未定义的属性“BeginRequestEventArgs”

    我使用 Visual Studio 开发了 Outlook 插件 我的插件有一个按钮 用于填充会议邀请正文中的详细信息并添加所需的与会者 这在 99 的情况下都有效 但是 时不时地它会给我下面的 JavaScript 错误 Uncaught
  • 不使用控件时,视频元素在 Chrome 中消失

    So I think这是一个浏览器错误 它出现在一个更复杂的设计 网站中 但我已经进行了很好的尝试 简化了我的代码和设计等 并发现了以下内容 嵌入时
  • 在方法内部执行方法

    我目前正在 FreeCodeCamp 中进行 JavaScript 练习 我的代码应该使用的测试用例之一是函数调用 如下所示 addTogether 2 3 这是我得到的基本功能 function addTogether return 当我
  • ReactJs 警告:不推荐使用改变“style”。考虑事先克隆它

    我收到以下警告 inWarning div was passed a style object that has previously been mutated Mutating style is deprecated Consider c

随机推荐