Câu hỏi này liên quan đến và lấy cảm hứng từ How to updoad in old browsers (ex Safari 5.1.4)Làm thế nào để tạo ra một ArrayBuffer và dữ liệu URI từ các đối tượng Blob và File mà không có FileReader?
Với một yếu tố <input type="file"> có thuộc tính chứa File đối tượng mà kế thừa từ Blobfiles, là nó có thể tạo ra một ArrayBuffer và chuyển đổi ArrayBuffer đến một data URI từ một Blob hoặc File đối tượng mà không sử dụng FileReader?
phương pháp tiếp cận đã cố gắng cho đến nay đã được
tạo ra một mô hình
WebSocketvới.binaryTypethiết lập để"arraybuffer", tạo mộtMessageEventvớievent.datathiết lập đểFileđối tượng; Kết quả làFileđối tượng ởonmessagehandlerbộ nguyên mẫu của
File-ArrayBuffer,Uint8Array; Kết quả làUncaught TypeError: Method ArrayBuffer.prototype.byteLength called on incompatible receiver #<ArrayBuffer>(),Uncaught TypeError: Method get TypedArray.prototype.byteLength called on incompatible receiver [object Object]()thiết
FiletạiFormDatađối tượng, cố gắng để gửi yêu cầu cơ thể để , phải thừa nhận là không tốt thụ thai; Kết quảBad Requesttại plnkr
Kết quả mong đợi: Chuyển đổi Blob và File đối tượng để TypedArray sau đó đến data URL, hoặc trực tiếp đến 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>
Xem thêm Display image from blob using javascript and websockets, How can you encode a string to Base64 in JavaScript?; thú vị mỉa mai như bây giờ hỏi câu hỏi tương tự 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
Tôi không có safari 5 trong tầm tay (btw trình duyệt này không dùng nữa trong nhiều năm người dùng nên thay đổi nó thành một ASAP cập nhật), cũng không phải trình duyệt hỗ trợ 'Blob' objects (hoặc' File') nhưng không hỗ trợ 'FileReader'. Nó thực sự tồn tại? không phải là bạn đang tìm kiếm một cách sai lầm? (một cách giải quyết là tải tệp lên ở đâu đó và sau đó tải lại tệp đó bằng XHR nhưng trước hết hãy thử trả lời những câu hỏi đầu tiên) – Kaiido
@Kaiido _ "cũng không phải trình duyệt hỗ trợ đối tượng Blob (hoặc Tệp) nhưng không hỗ trợ FileReader. Nó có thực sự tồn tại không? ”_ Không có quyền truy cập safari ở đây. Theo khả năng tương thích trình duyệt MDN, '' được hỗ trợ ở phiên bản 1.0 của safari, 'Blob' ở 5.1,' FileReader' ở mức 6.0; 'responseType'' "blob" 'và' "arraybuffer" 'ở trạng thái' XMLHttpRequest' '" Có "'. Bạn tò mò về cách dữ liệu thô thực sự được lưu trữ, được truy cập trong đối tượng 'Blob'? – guest271314
Có thể là triển khai sớm ... Quá tệ, nó cũng không hỗ trợ URL.createObjectURL, nếu không bạn có thể thử một cái gì đó đơn giản như 'var url = URL.createObjectURL (blob); var xhr = new XMLHttpRequest(); xhr.onload = function() { rawData = this.response; } xhr.open ('get', url) xhr.send(); '. Ps nói về việc triển khai sớm, bạn có thể thấy rằng IE9 không hỗ trợ TypedArray, nhưng vẫn có một loại thông qua đối tượng canvas ''imageData'. – Kaiido