带有分块请求正文的 XmlHttpRequest？

Question

I know how to handle chunked downloads in javascript, using the XmlHttpRequest object. Is there any way to perform a chunked upload using javascript, opening a connection but only uploading blobs of data bit by bit?

I know chunked uploads should be possible with Http 1.1 servers, and have found a lot of references to making chunked uploads using various other platforms (C# java etc.) but have not found any references to doing so in the browser with javascript.

EDIT: The use case is to stream data up to the server, and not to upload a large file, kind of mirroring the use of a chunked response to stream data down to the client. This is as an alternative to making individual ajax requests, since the chunks of data that's going up from client to server are pretty frequent (< 0.5s interval).

Answer 1

You can use the FileReader API and the slice method.

with slice you can get block of data that you can upload, then you need to reassemble them server side.

here is a good intro on how to handle files in javascript http://www.html5rocks.com/en/tutorials/file/dndfiles/

you can have a look at http://caniuse.com/#feat=filereader for browser support

Answer 2

As of today (November 2021), I believe support for UPLOADS using HTTP chunked data transfer is still largely missing in browsers. If you look at the "Send ReadableStream in request body" column of the browser support matrix for the Request (Fetch API):
https://developer.mozilla.org/en-US/docs/Web/API/Request#browser_compatibility
You can see that it is currently "No" for all browsers except "Deno". You will however notice the "Experimental" flag beside the column so it is available experimentally in some browsers such as Chrome. I wouldn't hold your breath about it becoming mainstream anytime soon though.

HTTP chunked data transfer encoding is not technically necessary for sending data a few chunks at a time, I believe regular HTTP data transfer also only sends data a few chunks at a time but the "chunking" is done at the TCP level instead (please correct me if I'm wrong here). Consequently, both protocols can be used to stream a file upload. WebSockets are of course another option as well. The main difference in which protocol to choose is based on whether or not you know the final length of the stream in advance or not.

If you need to stream upload data for which you DON'T know the length in advance (such as live video, video conference calls, remote desktop sessions, chats, etc.) then your best bet is perhaps the WebSocket API (or something built on top of it):
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

If you need to stream upload data for which you DO know the length in advance (files, images, videos, etc.) then I believe your best bet is probably a normal POST or PUT using the Fetch API:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
or still the old XmlHttpRequest API:
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest