Question

此问题与How to updoad in old browsers (ex Safari 5.1.4)

相关并受其启发

如果<input type="file">元素的files属性包含从File继承的Blob个对象，是否可以创建ArrayBuffer并转换{ {1}}来自ArrayBuffer或data URI对象的Blob而未使用File？

到目前为止已经尝试过的方法

创建模拟FileReader，WebSocket设置为.binaryType，创建"arraybuffer"，MessageEvent设置为event.data对象;结果是File处理程序File对象
将onmessage的原型设置为File，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]()对象设置File，尝试将请求正文发布到FormData，但事实上并非构思良好;结果<iframe>位于plnkr

预期结果：将Bad Request和Blob个对象转换为File然后转换为data URL，或直接转换为TypedArray

data URL

另见Display image from blob using javascript and websockets，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; Blob .slice() method，FileReader .readAsDataURL() method

Answer 1

我只是把它放在这里：

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>

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

1 个答案: