[Open-source applications] Use HTTPHandler + resumableJs + HTML5 to drag and drop to upload [large] files,

[Open-source applications] Use HTTPHandler + resumableJs + HTML5 to drag and drop to upload [large] files,

Preface:

Transmission of large files has always been a major technical difficulty. When the file size is too large, it is unrealistic to submit all the content to the memory. There is also a problem with large files: whether resumable and multi-file simultaneous transmission is supported.

This document uses resumableJs as an example to describe how to transfer large files in ASP. NET. In addition, this article uses the new Html5 feature: Drag and Drop supported.

The main technical points of this article are: how to receive the content transmitted by resumableJs (which is not clear on the official website) and how to merge files is not very difficult. If you want to change to the Controller in MVC to process file transfer, the method is similar.

Note: In the original blog, this article is used to back up the personal code of the original site. There are not many comments. If you do not understand this article, please provide it in the comments.

 

Effect:

ASPX File:

 
Appendix:
1. Technical difficulties
A. The file is too large. Modifying webconfig is useless.
B. resumable upload.
C. upload multiple files.
 
2 resumable. js
API: http://www.resumablejs.com/
 
Workflow:
Drag the file to DIV-> Start upload, uploadStart-> repeatedly trigger the SS event-> compete
 
Main parameters:
Get:
ResumableChunkNumber = 1 &
ResumableChunkSize = 1048576 &
ResumableCurrentChunkSize = 1048576 &
ResumableTotalSize = 27778318 &
ResumableType = &
ResumableIdentifier = 27778318-Samples7z &
ResumableFilename=Samples.7z &
Resumablerelativepath?samples.7z &
ResumableTotalChunks = 26
 
Post:
---------- 111061030216033
Content-Disposition: form-data; name = "resumableChunkNumber"
140
---------- 111061030216033
Content-Disposition: form-data; name = "resumableChunkSize"
1048576
---------- 111061030216033
Content-Disposition: form-data; name = "resumableCurrentChunkSize"
1048576
---------- 111061030216033
Content-Disposition: form-data; name = "resumableTotalSize"
171309601
---------- 111061030216033
Content-Disposition: form-data; name = "resumableType"
---------- 111061030216033
Content-Disposition: form-data; name = "resumableIdentifier"
171309601-sample7z
---------- 111061030216033
Content-Disposition: form-data; name = "resumableFilename"
Sample.7z
---------- 111061030216033
Content-Disposition: form-data; name = "resumableRelativePath"
Sample.7z
---------- 111061030216033
Content-Disposition: form-data; name = "resumableTotalChunks"
163
---------- 111061030216033
Content-Disposition: form-data; name = "file"; filename = "blob"
Content-Type: application/octet-stream
XXXCONTENT
---------- 309022088923579-