Mvc下异步断点续传大文件

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Mvc下异步断点续传大文件

最近公司一同事咨询了一个MVC项目下上传大文件时遇到的问题,问题描述如下:

MVC项目中,当上传比较大的文件时,速度非常慢,小文件基本没有影响。

原因分析:

如果是用传统的form表单去提交的话,会将整个文件一次性的加载到内存中然后再做保存,这个过程是相当慢的,特别是大文件,且上传文件容易受到各种因素的影响而导致上传失败,比如临时的网络故障等。

如何解决?

最直接的概念就是异步以及断点续传。

为什么要异步

1.如果一个表单提交的元素中有文件上传的需求,如最终因为文件上传失败而影响整个表

单数据的提交,这个体验性是非常差的。

2.如果上传文件时间特别长,容易使应用程序长时间失去响应,给用户一个错觉,最好的

方法是先让用户选择文件,此时点击上传,后台进行文件的异步上传,此时用户还可以继续去填写其它的表单元素,等用户填写完其它表单元素,文件有可能已经上传完成了,再提交表单,就只处理数据而不再上传文件了。增强了用户体验性。

为什么要断点续传

在处理大文件时,无法忍受因为一时的网络原因导致上传失败,从而重新再上传的烦恼。好的方法是将一个大文件分成N个小块来进行上传,即使第一次失败了,之前上传的那部分由于得到了保留,再次点击上传时,以前已经传输成功的部分就不会再次被重新写入文件。注意,第二次上传时,文件还是从0开始传输到服务器,而不能根据服务器上的文件选择性的传输片断,这部分不太好节省,有兴趣的可以研究下。

如何实现异步上传

这里可以利用jQuery的相应插件来完成,它的主要功能是将文件分割成N多个小块来批量上传,参考网址:https:///blueimp/jQuery-File-Upload

如何实现断点续传

其实这个也非常简单,在Http头信息中有一个Conten-Range的属性,它会说明此次传递的文件内容的片断范围,我们只需要在后台解析这个范围稍加处理就可以实现。之所这么简单,是因为有了上面的jQuery 上传文件的插件,它负责将一个大文件分成N多小块进行传输,这就有了请求头中的Content-Range。

这篇文章主要参考了

/bryansampica/archive/2013/01/15/AsyncMVCFileUpload.a spx ,但它没有完成对文件的保存功能,我这里加了断点续传的逻辑。

效果图:

可支持同时上传多个文件

上传成功后的效果

实现关键步骤:

1.引入jQuery上传文件组件

2.初始化上传组件

主要是控制进展条的显示以及组件的部分参数,比如文件块大小等等。

1 $(function() {

2 3 4 5 6 7 8 9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29 30

$('#fileupload').fileupload({

dataType: "json",

url: "/api/upload",

limitConcurrentUploads: 1,

sequentialUploads: true,

progressInterval: 100,

maxChunkSize: 10000,

add: function(e, data) {

$('#filelistholder').removeClass('hide');

data.context = $('

').text(data.files[0].name).appendTo( $('