[Dry goods only] What I Want To solve four years ago was a successful experiment today.

[Dry goods only] What I Want To solve four years ago was a successful experiment today.

The first week of the first software development job (not a week of the trial period, no salary trial ). Because it is not a Software Major, it has not been trained and relevant work experience. The boss is not at ease, but let me give it a try. The first thing to do is to upload a file, view the progress in real time, and preview the upload. The preview file types include word, ppt, excel, flash, and video to obtain the preview image by frame. The office file is displayed after the server is converted to html.

When I was satisfied, I stayed. Then I stayed at the company for two years.

Unsolved Issues:

Uploading large files and multipart uploads are not supported by browsers. Third-party plug-ins are required. The most fundamental reason is that JavaScript on the browser cannot read file content due to security concerns.

Now IE10 and other mainstream browsers support html5, and js has built-in Filereader objects and websocket, which are cool to hear.

Significant moment:

I implemented native multipart upload, with a very rugged road and good results.

This implementation marks the irreplaceable position of browsers in the future.

I will only introduce the dry goods section. Other details are available to anyone who is interested.

First, multipart upload must be able to read the file content in js. The filereader object is the key. This is an asynchronous reading method, and the file content must be obtained in the onload event. To truly multipart upload, the progress of reading files through onprogress is not enough, and the browser will be stuck when the file is too large. The slice function of file is the key. The file content is segmented, and each onload event is triggered, marking the completion of reading a piece of content. In this event, the file can be further processed, such as uploading.

FileReader has four read methods,

AsTextIs only recommended for reading text files.

AsDataUrlThe read media file can be directly used for the src attribute, or the html file content can also be read as DataURL

AsArrayBufferThe official introduction says it cannot be used directly. You need to use DataView, such as int8Array or int32Array. In fact, this is conditional. Since the design is certainly useful,When binarytypepolic'arraybuffer' of websocket, the event.tar get. result can be directly sent to the server.The server receives byte [], corresponding to the NewDataReceived event of superwebsocket. Currently, when the file size is 2 K, the server can receive it. When the file size is 18 K, superwebsocket reports a protocolerror. I don't know what the critical value is or what parameters need to be set. The rfc6455 protocol does not seem to limit the maximum size. I have read this agreement last year and will check it later.

Key webSocket settings:

Client = new WebSocket ("ws: // 127.0.0.1: 2014"); client. binaryType = "arraybuffer"; // if this attribute is not set, the byte array cannot be directly sent to the server. If the superwebsocket Server Reports protocolerror, this may be the cause.

The webSocket. send method is called in the onload event:

client.send(this.result);

Core code for multipart upload combining slice and onload events:

Var res = this. result; loaded + = res. byteLength; if (loaded <fileSize) // continue to read the next part {readBlob (loaded); times + = 1; console. log ("next block, times:" + times);} else {// read completion console. log ("done loaded:" + loaded + ", size:" + fileSize );}

Slice usage:

function readBlob(start){    var blob = currentFile.slice(start, start + step);       reader.readAsArrayBuffer(blob);}

 

     // 0             1                   2                   3     // 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1     //+-+-+-+-+-------+-+-------------+-------------------------------+     //|F|R|R|R| opcode|M| Payload len |    Extended payload length    |     //|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |     //|N|V|V|V|       |S|             |   (if payload len==126/127)   |     //| |1|2|3|       |K|             |                               |     //+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +     //|     Extended payload length continued, if payload len == 127  |     //+ - - - - - - - - - - - - - - - +-------------------------------+     //|                               |Masking-key, if MASK set to 1  |     //+-------------------------------+-------------------------------+     //| Masking-key (continued)       |          Payload Data         |     //+-------------------------------- - - - - - - - - - - - - - - - +     //:                     Payload Data continued ...                :     //+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +     //|                     Payload Data continued ...                |     //+---------------------------------------------------------------+

From the frame structure, there are eight bytes indicating the content length. So what is the content length limit? Who is familiar with superwebsocket?

AsBinaryStringI do not agree with this method, and IE does not.

If the server side does not support websocket and does not want to use third-party components such as superwebsocket, you can directly use ajax to perform multipart upload. It is determined that each request will create a new connection.

Precautions for uploading Using ajax:

We recommend that you convert arraybuffer to int32array, so that the client can quickly convert. The server uses int32 [] to receive data. If int8array is used, the server can also use int32 to receive data.

Key Points: Async: false to ensure the sequence. You can also add an additional parameter number during each upload and re-assemble the sequence on the server.

If Int8array is used, the server can directly convert each element into a byte

  [System.Web.Mvc.HttpPost]        public ActionResult File(int[] datas)        {            if (datas != null)            {                var d = datas.ToList().ConvertAll(x => (byte)x).ToArray();            }            return Content("OK");        }

 

Int32array, the server can use bitconverter. getbytes (int) method.

[System. Web. Mvc. HttpPost] public ActionResult File (int [] datas) {if (datas! = Null) {List <byte> bs = new List <byte> (); // The received File Buffer object for (int I = 0; I <datas. length; I ++) {foreach (var item in BitConverter. getBytes (datas [I]) {bs. add (item) ;}}return Content ("OK ");}

Key ajax client upload methods:

  $.ajax("/Home/File", {                data: { datas: new Int8Array(this.result) }, success: function (res) {                    console.log(res);                },                async: false,                type:"post"            });

This call is located in the onload event of FileReader.

This is just an example of multipart upload of files. More benefits are real-time communication, such as real-time retrieval of the server processing progress without repeated requests, leave the bridge behind me. It is possible to push messages.

If it makes sense, don't forget to click [recommendation]