C#实现上传文件分割,断点续传上传文件


一 介绍

断点续传搜索大部分都是下载的断点续传,涉及到HTTP协议1.1的Range和Content-Range头。

来个简单的介绍

所谓断点续传,也就是要从文件已经下载的地方开始继续下载。在以前版本的 HTTP 协议是不支持断点的,HTTP/1.1 开始就支持了。一般断点下载时才用到 Range 和 Content-Range 实体头。

Range

用于请求头中,指定第一个字节的位置和最后一个字节的位置,一般格式:

Range:(unit=first byte pos)-[last byte pos]

Content-Range

用于响应头,指定整个实体中的一部分的插入位置,他也指示了整个实体的长度。在服务器向客户返回一个部分响应,它必须描述响应覆盖的范围和整个实体长度。一般格式:

Content-Range: bytes (unit first byte pos) – [last byte pos]/[entity legth]

请求下载整个文件:

  1. GET /test.rar HTTP/1.1
  2. Connection: close
  3. Host: 116.1.219.219
  4. Range: bytes=0-801 //一般请求下载整个文件是bytes=0- 或不用这个头

一般正常回应

  1. HTTP/1.1 200 OK
  2. Content-Length: 801
  3. Content-Type: application/octet-stream
  4. Content-Range: bytes 0-800/801 //801:文件总大小

 

而今天要说的是上传的断点续传,用到了Content-Range头

上传的续传原理跟下载的续传同理。

就是在上传前把文件拆分后上传。服务器端接收合并,即使上传断了。下次上传依然从服务器端的文件现有字节后合并文件。最终上传完成。

二 实现

 服务器端
服务端是webapi实现。或是mvc,webform皆可。

服务端的原理就是接收上传数据流。保存文件。如果此文件已存在。就是合并现有文件。

这里文件的文件名是采用客户端传过来的数据。

文件名称是文件的MD5,保证文件的唯一性。

Source code    
[HttpGet] public HttpResponseMessage GetResumFile() { //用于获取当前文件是否是续传。和续传的字节数开始点。 var md5str = HttpContext.Current.Request.QueryString["md5str"]; var saveFilePath = HttpContext.Current.Server.MapPath("~/Images/") + md5str; if(System.IO.File.Exists(saveFilePath)) { var fs = System.IO.File.OpenWrite(saveFilePath); var fslength = fs.Length.ToString(); fs.Close(); return new HttpResponseMessage { Content = new StringContent(fslength, System.Text.Encoding.UTF8, "text/plain") }; } return new HttpResponseMessage(HttpStatusCode.OK); } [HttpPost] public HttpResponseMessage Rsume() {   var file = HttpContext.Current.Request.InputStream; var filename = HttpContext.Current.Request.QueryString["filename"];   this.SaveAs(HttpContext.Current.Server.MapPath("~/Images/") + filename, file);     HttpContext.Current.Response.StatusCode = 200;   // For compatibility with IE's "done" event we need to return a result as well as setting the context.response return new HttpResponseMessage(HttpStatusCode.OK); }     private void SaveAs(string saveFilePath,System.IO.Stream stream) { long lStartPos = 0; int startPosition = 0; int endPosition = 0; var contentRange = HttpContext.Current.Request.Headers["Content-Range"]; //bytes 10000-19999/1157632 if (!string.IsNullOrEmpty(contentRange)) { contentRange = contentRange.Replace("bytes", "").Trim(); contentRange = contentRange.Substring(0, contentRange.IndexOf("/")); string[] ranges = contentRange.Split('-'); startPosition = int.Parse(ranges[0]); endPosition = int.Parse(ranges[1]); } System.IO.FileStream fs; if (System.IO.File.Exists(saveFilePath)) { fs = System.IO.File.OpenWrite(saveFilePath); lStartPos = fs.Length;   } else { fs = new System.IO.FileStream(saveFilePath, System.IO.FileMode.Create); lStartPos = 0; } if (lStartPos > endPosition) { fs.Close(); return; } else if (lStartPos < startPosition) { lStartPos = startPosition; } else if (lStartPos > startPosition && lStartPos < endPosition) { lStartPos = startPosition; } fs.Seek(lStartPos, System.IO.SeekOrigin.Current); byte[] nbytes = new byte[512]; int nReadSize = 0; nReadSize = stream.Read(nbytes, 0, 512); while (nReadSize > 0) { fs.Write(nbytes, 0, nReadSize); nReadSize = stream.Read(nbytes, 0, 512); } fs.Close(); }

客户端

这里的客户端是winform,功能就是选择文件后即刻上传。如果中途网络,断点等因素没有传成功。

可以再次选择此文件上传。服务器会合并之前传送的文件字节。实现断点续传。

private void btnSelectFile_Click(object sender, EventArgs e) { OpenFileDialog openFileDialog = new OpenFileDialog(); openFileDialog.InitialDirectory = "c:\\"; openFileDialog.RestoreDirectory = true; openFileDialog.FilterIndex = 1; if (openFileDialog.ShowDialog() == DialogResult.OK) { var fName = openFileDialog.FileName; FileStream fStream = new FileStream(fName, FileMode.Open, FileAccess.Read); var mdfstr = GetStreamMd5(fStream); fStream.Close(); var startpoint = isResume(mdfstr, Path.GetExtension(fName)); MessageBox.Show(UpLoadFile(fName, url, 64, startpoint,mdfstr)); } }   /// <summary> /// 根据文件名获取是否是续传和续传的下次开始节点 /// </summary> /// <param name="md5str"></param> /// <param name="fileextname"></param> /// <returns></returns> private int isResume(string md5str, string fileextname) { System.Net.WebClient WebClientObj = new System.Net.WebClient(); var url = "http://localhost:13174/api/file/GetResumFile?md5str="+md5str+fileextname; byte[] byRemoteInfo = WebClientObj.DownloadData(url); string result = System.Text.Encoding.UTF8.GetString(byRemoteInfo); if(string.IsNullOrEmpty(result)) { return 0; } return Convert.ToInt32(result);   } #region /// <summary> /// 上传文件(自动分割) /// </summary> /// <param name="filePath">待上传的文件全路径名称</param> /// <param name="hostURL">服务器的地址</param> /// <param name="byteCount">分割的字节大小</param> /// <param name="cruuent">当前字节指针</param> /// <returns>成功返回"";失败则返回错误信息</returns> public string UpLoadFile(string filePath, string hostURL, int byteCount, long cruuent, string mdfstr) { string tmpURL = hostURL; byteCount = byteCount * 1024;     System.Net.WebClient WebClientObj = new System.Net.WebClient(); FileStream fStream = new FileStream(filePath, FileMode.Open, FileAccess.Read);     BinaryReader bReader = new BinaryReader(fStream); long length = fStream.Length; string sMsg = "上传成功"; string fileName = filePath.Substring(filePath.LastIndexOf('\\') + 1); try {   #region 续传处理 byte[] data; if (cruuent > 0) { fStream.Seek(cruuent, SeekOrigin.Current); } #endregion   #region 分割文件上传 for (; cruuent <= length; cruuent = cruuent + byteCount) { if (cruuent + byteCount > length) { data = new byte[Convert.ToInt64((length - cruuent))]; bReader.Read(data, 0, Convert.ToInt32((length - cruuent))); } else { data = new byte[byteCount]; bReader.Read(data, 0, byteCount); }   try {     //*** bytes 21010-47021/47022 WebClientObj.Headers.Remove(HttpRequestHeader.ContentRange); WebClientObj.Headers.Add(HttpRequestHeader.ContentRange, "bytes " + cruuent + "-" + (cruuent + byteCount) + "/" + fStream.Length);   hostURL = tmpURL + "?filename=" + mdfstr + Path.GetExtension(fileName); byte[] byRemoteInfo = WebClientObj.UploadData(hostURL, "POST", data); string sRemoteInfo = System.Text.Encoding.Default.GetString(byRemoteInfo);   // 获取返回信息 if (sRemoteInfo.Trim() != "") { sMsg = sRemoteInfo; break;   } } catch (Exception ex) { sMsg = ex.ToString(); break; } #endregion   } } catch (Exception ex) { sMsg = sMsg + ex.ToString(); } try { bReader.Close(); fStream.Close(); } catch (Exception exMsg) { sMsg = exMsg.ToString(); }   GC.Collect(); return sMsg; } public static string GetStreamMd5(Stream stream) { var oMd5Hasher = new MD5CryptoServiceProvider(); byte[] arrbytHashValue = oMd5Hasher.ComputeHash(stream); //由以连字符分隔的十六进制对构成的String,其中每一对表示value 中对应的元素;例如“F-2C-4A” string strHashData = BitConverter.ToString(arrbytHashValue); //替换- strHashData = strHashData.Replace("-", ""); string strResult = strHashData; return strResult; }

  好久没登录博客园了,今天来一发分享。

  最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了)。当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件还有别的信息需要交互,跟后端商量后决定文件单独上传,获取到服务器端返回的文件地址在和表单一起提交。这里就需要异步上传文件。

  在网上扒了扒相关的内容,发现还真不少,阮一峰老师的这篇文章(文件上传的渐进式增强)就介绍的很具体,下面就谈谈自己在实战中遇到的一些问题的感受吧。

  先看看效果,实现了哪些功能

  (好吧,就一个按钮而已,搞得神神秘秘,嘿嘿)

  

1
< button  type="button" class="btn" @click="upload">点击上传文件</ button >

  给按钮绑定了一个点击事件,下面看看点击事件方法里做了什么

复制代码
methods: {
        upload: function(){
            myUpload({
                url: window.location.protocol + '//' + window.location.host + '/crm/upload',
                maxSize: 10,
                beforeSend: function(file){

                },
                callback: function(res){
                    var data = JSON.parse(res);
                    pageCont.attachmentUrl = data.url;
                },
                uploading: function(pre){
                    pageCont.uploadCont.display = 'block';
                    pageCont.uploadStyle.width = pre * 2 + 'px';
                    pageCont.pre = pre;
                }
            });
        }
}
复制代码

  按钮绑定的点击事件执行了upload方法,在upload方法里调用了一下myUpload方法,并传递了一些配置信息进去,稍后说下这些配置信息。先看看myUpload的具体实现:

  初始化了一个FormData对象和一个XMHttpResquest对象,创建一个type为file的input,并触发一次该input的click,如下

复制代码
var fd = new FormData(),
        xhr = new XMLHttpRequest(),
        input;
input = document.createElement('input');
input.setAttribute('id', 'myUploadInput');
input.setAttribute('type', 'file');
input.setAttribute('name', 'file');
document.body.appendChild(input);
input.style.display = 'none';
input.click();
复制代码

  监听刚才创建的input的change事件,并作在里面做相应处理

复制代码
input.onchange = function(){
        if(!input.value){return;}
        if(option.maxSize &&  input.files[0].size > option.maxSize * 1024 * 1024){
            dialog({
                title: '提示',
                content: '请上传小于'+option.maxSize+'M的文件',
                okValue: '确定',
                ok: function () {}
            }).showModal();
            return;
        }
        if(option.beforeSend instanceof Function){
            if(option.beforeSend(input) === false){
                return false;
            }
        }
        fd.append('file', input.files[0]);
        xhr.open('post', option.url);
        xhr.onreadystatechange = function(){
            if(xhr.status == 200){
                if(xhr.readyState == 4){
                    if(option.callback instanceof Function){
                        option.callback(xhr.responseText);
                    }
                }
            }else{
                if(!(dialog.get('uploadfail'))){
                    dialog({
                        id: 'uploadfail',
                        title: '提示',
                        content: '上传失败',
                        okValue: '确定',
                        ok: function () {}
                    }).showModal();
                }
            }
        }
        xhr.upload.onprogress = function(event){
            var pre = Math.floor(100 * event.loaded / event.total);
            if(option.uploading instanceof Function){
                option.uploading(pre);
            }
        }
        xhr.send(fd);
    }
复制代码

  解释下上面的代码。input的change事件触发后,首先判断了下当前是否选择了文件

if(!input.value){return;}

  已开始我是没做这个判断的,在后来的测试过程中发现,当上传一次文件后,再次点击按钮上传,打开文件选择框,然后不选择文件,而是点击取消按钮,change事件也触发了,导致后面的代码也会执行,显然这不合理,故加了这个判断。

  然后限制了下上传文件的大小(这样的事能够前端处理就不要交给服务端来验证了),当文件大小超过最大限制,就会弹框提示

复制代码
if(option.maxSize &&  input.files[0].size > option.maxSize * 1024 * 1024){
            dialog({
                title: '提示',
                content: '请上传小于'+option.maxSize+'M的文件',
                okValue: '确定',
                ok: function () {}
            }).showModal();
            return;
        }
复制代码

  然后加了一个文件上传前的操作,可以在文件上传前做一些处理,如进度条的显示,图片预览等等

       if(option.beforeSend instanceof Function){
            if(option.beforeSend(input) === false){
                return false;
            }
        }   

 

  接下来将文件append到formData对象里,使用字段名‘file’,该字段名是服务端接收文件时使用的字段名

fd.append('file', input.files[0]);

  然后就是使用XMLHttpRequest对象向服务端发送数据了

复制代码
        xhr.open('post', option.url);
        xhr.onreadystatechange = function(){
            if(xhr.status == 200){
                if(xhr.readyState == 4){
                    if(option.callback instanceof Function){
                        option.callback(xhr.responseText);
                    }
                }
            }else{
                if(!(dialog.get('uploadfail'))){
                    dialog({
                        id: 'uploadfail',
                        title: '提示',
                        content: '上传失败',
                        okValue: '确定',
                        ok: function () {}
                    }).showModal();
                }
            }
        }
        xhr.upload.onprogress = function(event){
            var pre = Math.floor(100 * event.loaded / event.total);
            if(option.uploading instanceof Function){
                option.uploading(pre);
            }
        }
        xhr.send(fd);    
复制代码

  在向服务端发送数据时,使用了监听了一下progress事件,主要是为了进行上传进度的显示,上述代码中,

var pre = Math.floor(100 * event.loaded / event.total);

  获取上传的百分比,能够拿到这个值,页面上就可以展示各种各样的上传进度效果了。

 

  差不多介绍完了,下面补充一下使用中遇到的问题:

  问题一:文件在上传的过程中,使用JSON.parse()序列化服务端返回的json字符串报错(傻啊,文件还在上传,服务端怎么会返回数据啊)。

事情是这样的,一开始,我在readystatechange里只监听了状态码是否是200,如果是就说明通了,然后执行回调,在回调里处理服务端返回的数据,但是通了不一定代表服务端已经返回了数据,所以就出现了上面的错误,所以后来在判断了status是否为200后,还判断了readyState,以确保服务端已处理完毕并返回数据在执行回调

            if(xhr.status == 200){
                    if(option.callback instanceof Function){
                        option.callback(xhr.responseText);
                    }
            }    

  问题二:重复创建input。每次点击按钮上传文件后,页面都会多一个type=file的input感觉不是很好(个人癖好吧),所以对最开始的初始化代码做了下优化,判断当前页面是否存在刚才创建的input,存在就直接使用,不存在就创建,如下

复制代码
    if(document.getElementById('myUploadInput')){
        input = document.getElementById('myUploadInput');
    }else{
        input = document.createElement('input');
        input.setAttribute('id', 'myUploadInput');
        input.setAttribute('type', 'file');
        input.setAttribute('name', 'file');
        document.body.appendChild(input);
        input.style.display = 'none';
    }
复制代码

 

好了,就这么多了。看看效果

 

 

Resumable.js是一个JavaScript库,通过HTML5 File API来为应用加入多文件同步上传、稳定传输和断点续传功能。

 http://www.resumablejs.com/

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM