WEB上传大文件解决方案

众所皆知，web上传大文件，一直是一个痛。上传文件大小限制，页面响应时间超时.这些都是web开发所必须直面的。

本文给出的解决方案是：前端实现数据流分片长传，后面接收完毕后合并文件的思路。下面贴出简易DEMO源码分享：

前端页面：

@{

    ViewBag.Title = "Upload";

}

<h2>Upload</h2>

<table class="table table-striped">

    <tr>

        <td><input type="file" id="file"  onchange="selfile()" /></td>

        <td><input type="button" value="上传" onclick="uploading()" /></td>

    </tr>

    <tr>

        <td colspan="2">文件信息：<span id="fileMsg"></span></td>

    </tr>

    <tr>

        <td colspan="2">当前进度：<span id="upsize"></span></td>

    </tr>

</table>

<script src="~/Scripts/myUploader.js"></script>

<script type="text/javascript">

   //guid

    var guid = "@Guid.NewGuid()";

    var uploader;

    function selfile() {

        var f =  $("#file")[0].files[0];

        uploader = new SupperUploader("@Url.Action("RecvUpload")", f, guid, (1024*1024));

        $("#fileMsg").text("文件名：" + uploader.fileName + "文件类型：" + uploader.fileType + "文件大小：" + uploader.fileSize + "字节");

    }

    function uploading() {

        uploader.UploadFun(function () {

            $("#upsize").text(uploader.upedSize);

        })

    }

</script>

 

后端代码，此Demo是基于MVC架构的：

[HttpGet]

public ActionResult Upload() {

return View();

}

[HttpPost]

public ActionResult RecvUpload(){

try

{

string fileName = Request["fname"];

string index = Request["index"];

string guid = Request["guid"];

var file = Request.Files[0];

var ismerge = Request["ismerge"];

string tempDirpath = "~/Content/temp/" + guid + "/";

string savepath = tempDirpath + index + "_" + fileName;

//合并文件

if (bool.Parse(ismerge))

{

//获取所有分割文件

var files = System.IO.Directory.GetFiles(Server.MapPath(tempDirpath));

//文件FILEINFO

var infos = files.Select(x => new FileInfo(x)).ToList().OrderBy(x=>x.LastWriteTime).ToList();

//合并文件流

FileStream mergefs = new FileStream(Server.MapPath("~/Content/temp/" + fileName),FileMode.Append);

BinaryWriter bw = new BinaryWriter(mergefs);

FileStream tempfs = null;

BinaryReader tempbr= null;

infos.ToList().ForEach(f =>

{

tempfs = new FileStream(f.FullName, FileMode.Open);

tempbr = new BinaryReader(tempfs);

bw.Write(tempbr.ReadBytes((int)tempfs.Length));

tempfs.Close();

tempbr.Close();

});

bw.Close();

mergefs.Close();

//删除分块文件

infos.ForEach(f =>{

System.IO.File.Delete(f.FullName);

});

return Json("success");

}

if (!System.IO.Directory.Exists(Server.MapPath(tempDirpath))){

System.IO.Directory.CreateDirectory(Server.MapPath(tempDirpath));

}

using (FileStream fs = new FileStream(Server.MapPath(savepath), FileMode.CreateNew))

{

using (Stream stream = file.InputStream)

{

byte[] buffer = new byte[stream.Length];

stream.Read(buffer, 0, (int)stream.Length);

fs.Write(buffer, 0, buffer.Length);

}

}

return Json("success");

}

catch (Exception e)

{

return Json(e.Message);

}

}

最终效果：

​

上传文件存储服务器目录：

D:\wamp64\www\up6\db\upload\2019\04\19\920144c756af424ca59136be71cf9209



文件上传记录可在数据库中查看：



文件上传完成，没有出现丢包的情况，完全可以直接使用了。

DEMO下载地址：http://blog.ncmem.com/wordpress/2019/08/09/web大文件上传解决方案-2/