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>
SupperUploader是我自己封装的JS插件，源码如下：
var SupperUploader = function (uploadUrl, file, guid, cutSize) {
this.file = file;
//文件大小
this.fileSize = file.size;
//文件类型
this.fileType = file.type;
//文件路径
this.fileName = file.name;
//guid
this.guid = guid;
//分片大小
this.cutSize = cutSize,
//已上传
this.upedSize = 0;
//开始位置
this.startIndex = 0;
//结束位置
this.endIndex = 0;
//序号
this.indexr = 0;
//上传路径
this.uploadUrl = uploadUrl;
//合并结果
this.merged = false;
};
SupperUploader.prototype = {
UploadFun: function (uploadCallBack) {
if (this.merged)
return;
var thisobj = this;
$.ajax({
type: "POST",
url: thisobj.uploadUrl,
enctype: 'multipart/form-data',
data: thisobj.CutFileFun(),
processData: false,
contentType: false,
success: function (res) {
if (res == "success") {
if (thisobj.upedSize == thisobj.fileSize) {
thisobj.merged = true;
alert("已成功上传！")
return;
}
thisobj.upedSize += thisobj.cutSize;
if (thisobj.upedSize > thisobj.fileSize)
thisobj.upedSize = thisobj.fileSize;
thisobj.indexr+=1;
//执行回调函数 uploadCallBack();
//继续调用上传 thisobj.UploadFun(uploadCallBack);
}
}
});
},
CutFileFun: function () {
var formData = null;
if (this.upedSize < this.fileSize) {
this.startIndex = this.upedSize;
this.endIndex = this.startIndex + this.cutSize;
if (this.endIndex > this.fileSize) {
this.endIndex = this.fileSize;
}
var currentData = this.file.slice(this.startIndex, this.endIndex);
formData = new FormData();
formData.append("file", currentData);
formData.append("index", this.indexr);
formData.append("fname", this.fileName);
formData.append("guid", this.guid);
formData.append("ismerge", this.fileSize == this.endIndex);
}
return formData;
}
};
后端代码，此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);
}
}
在此分享！希望多多指正~
后端代码逻辑大部分是相同的，目前能够支持MySQL,Oracle,SQL。在使用前需要配置一下数据库，可以参考我写的这篇文章：http://blog.ncmem.com/wordpress/2019/08/07/java超大文件上传与下载/
