Index.html
1 @{ 2 ViewData["Title"] = "Home Page"; 3 } 4 5 @{ 6 ViewBag.Title = "Home Page"; 7 } 8 <div class="form-horizontal" style="margin-top:80px;"> 9 <div class="form-group"> 10 <div class="col-md-10"> 11 <input name="file" id="file" type="file" /> 12 </div> 13 </div> 14 <div class="form-group"> 15 <div class="col-md-offset-2 col-md-10"> 16 <input type="submit" id="submit" value="上传" class="btn btn-success" /> 17 </div> 18 </div> 19 </div> 20 21 <script type="text/javascript" src="~/js/jquery-3.4.1.min.js"></script> 22 <script type="text/javascript"> 23 24 $(function () { 25 $('#submit').click(function () { 26 UploadFile($('#file')[0].files); 27 }); 28 }); 29 30 function UploadFile(targetFile) { 31 // 创建上传文件分片缓冲区 32 var fileChunks = []; 33 // 目标文件 34 var file = targetFile[0]; 35 // 设置分片缓冲区大小 36 var maxFileSizeMB = 8; 37 var bufferChunkSize = maxFileSizeMB * (1024 * 1024); 38 // 读取文件流其实位置 39 var fileStreamPos = 0; 40 // 设置下一次读取缓冲区初始大小 41 var endPos = bufferChunkSize; 42 // 文件大小 43 var size = file.size; 44 // 将文件进行循环分片处理塞入分片数组 45 while (fileStreamPos < size) { 46 var fileChunkInfo = { 47 file: file.slice(fileStreamPos, endPos), 48 start: fileStreamPos, 49 end: endPos 50 } 51 fileChunks.push(fileChunkInfo); 52 fileStreamPos = endPos; 53 endPos = fileStreamPos + bufferChunkSize; 54 } 55 // 获取上传文件分片总数量 56 var totalParts = fileChunks.length; 57 var partCount = 0; 58 // 循环调用上传每一片 59 while (chunk = fileChunks.shift()) { 60 partCount++; 61 // 上传文件命名约定 62 var filePartName = file.name + ".partNumber-" + partCount; 63 chunk.filePartName = filePartName; 64 // url参数 65 var url = 'partNumber=' + partCount + '&chunks=' + totalParts + '&size=' + bufferChunkSize + '&start=' + chunk.start + '&end=' + chunk.end + '&total=' + size; 66 chunk.urlParameter = url; 67 // 上传文件 68 UploadFileChunk(chunk); 69 } 70 } 71 72 function UploadFileChunk(chunk) { 73 var data = new FormData(); 74 data.append("file", chunk.file, chunk.filePartName); 75 $.ajax({ 76 url: '/api/upload/upload?' + chunk.urlParameter, 77 type: "post", 78 cache: false, 79 contentType: false, 80 processData: false, 81 data: data, 82 }); 83 } 84 </script>