NX File Upload instance and NX File Upload instance

NX File Upload instance and NX File Upload instance

The company's products always use flash to upload files. However, there are more and more difficult problems to solve when there are more user demands. Finally, we try to use the freeform and small page control provided by shuozheng to solve the problem.
There are three or four ways to upload shuzheng files. As a result of the release of the company's products, we chose the httpPost solution. Other methods, such as ftp and Http put, are also good choices, however, if you need to build another website or involve permission issues, I am afraid the end user's deployment and maintenance will not be enough.
The httpPost solution also has a very good advantage, that is, it is easy to save the file to the file or to the database after the file is uploaded.

Our requirements and features are listed here:
1. Supports Multifile upload;
2. Supports uploading large files larger than 4 GB;
3. Use the shuozheng Zip option to compress the upload to reduce the bandwidth pressure;
4. Supports resumable data transfer to remember the position of the failed packet sending;
5. asynchronous upload is supported to prevent the browser from getting stuck when uploading large files;
6. There is a progress bar icon. We did not use the progress bar provided by shuozheng. Instead, we wrote a progress bar using js. The information in it is more and the interface is more friendly;
7. You can cancel the upload at any time;

With the help of the documents, we have completed the development. The final interface is as follows:

Start upload:
　　

Uploading:

　　
Upload ended:

　　
　　

How about? Is the function complete? The shuozheng control is 2px X 2px hidden in the upper left corner.

The following is a key part of the source code:
Client js: Upload_Client.js
Backend C #: Upload_Server.aspx.cs

Note the following:
1. Subcontracting is required. The package size (PartSize) must be set. The package size must be moderate. If it is too large, the progress bar is too slow. If it is too small, too many requests initiated will affect the efficiency;
2. Because it is an asynchronous upload, you must make full use of the Shuo Zheng OnEvent event. The information on the progress bar is from the event parameter;

Analyze the js of this client step by step as follows:
Step 1. Open the dialog box provided by shuoxi kit and select a file
　　
　　

Step 2. Upload
　　
　　

Step 3. Initiate an upload
　　

Step 4. Listen for upload events
　　

Note: The "Download" section in the source code is irrelevant to the upload. In fact, we have also implemented the file Download function, which uses the "Download" function in shuozheng's global function. Since the Download is simple, we will not analyze it here.

Finally, the task is successfully completed. Compared with the previous flash upload, the two sides have their own advantages and disadvantages. The following lists some comparisons:
Advantages of Supcan
1.1 simple to use, the background basically only needs to be responsible for receiving data. Flash's http Body is installed with both the upload parameters and the binary stream of the file. the mixing of the two causes the backend parsing to be extremely complex, once big data is involved, the interface HttpModule must be implemented to bypass IIS's limit on file size (4 MB by default). In addition, the underlying layer extracts Http data, which is difficult to implement and has a high failure rate in data reception, in addition, later maintenance is cumbersome. The http body of shuozheng is pure data and does not need to be parsed. All the control parameters are placed in the URL, and the backend resolution is very clear:

These parameters also contain the MD5 parameter of the data packet, and the backend can easily verify the correctness of the data packet;
1.2 Flash has insufficient support for ultra-large data, while Supcan provides ultra-large data upload support of over 4 GB;
1.3 Flash does not support File Upload by passing in the file path, while Supcan supports file upload through the path;
1.4 Flash does not support resumable data transfer. Supcan itself transfers data packets to the background. Native supports resumable data transfer. As long as the number of uploaded parts is saved on the backend, resumable data transfer is supported;
1.5 Supcan supports client compression to save bandwidth.

Flash advantages
2.1 The browser supports many browsers and is compatible with most browsers. Supcan supports mainstream browsers, but firefox does not work well. The control crashes when the file selection dialog box is opened, the answer is that there is an underlying conflict with Firefox message processing and cannot be solved;
2.2 Flash events are richer and many event interfaces are provided for developers to call;
2.3 The Flash file upload queue performs better and can automatically upload files one by one, while Supcan needs to be called cyclically in js;
2.4 The Flash upload interface supports customization and allows you to create rich UIS.