前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组

马上要过年了,哎,回家的心情也特别的激烈。有钱没钱,回家过年,家永远是舔舐伤口最好的地方。新的一年继续加油努力。

上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行检查和限制。但是上次还有个心结一直没解开,就是本来前端浏览器的文件切割已经好了,但是后台文件重组一直没搞明白和处理好,所以就搁置了。主要也是对自己的代码负责,因为自己本身都没把这个技术搞透彻,外加各种测试都没通过,不想这样打脸。所以这个心结一直憋了好久,做梦都在想。终于功夫不负有心人,这周终于将这个问题干掉了,一个字:爽!!!下面咱们直接干!!

一些概念:

  前端ajax的level2的方案中可以发送很多数据类型,具体可查看ajax2的设计规范(PS:w3c的原版设计规范,打开有点慢)

  js新的技术中增加了File对象(实际上就是blob的具体化的一个东西),设计规范参考这里2个 File API 规范 和 FileSystem API 规范

  后台二进制文件重组

    1. 创建空的文件流

    2. 读取临时存储切割文件的文件夹,获得所有文件路径  切记:一定要按顺序进行排序,否则组合文件将会错误

    3. 按顺序将切割小文件读取成二进制流,写进空的文件流中

    4. 写入完成,关闭文件流,删除临时存储切割文件的地方

工具准备:

    1. 前端代码,包含ajax库和测试代码

    2. nginx服务器,做分离,反向代理后台代码

    3. 文件MD5计算工具,检查文件切割上传完成之后是否改变

    4. IIS服务器,部署后台切割文件组合代码

    5. postMan接口测试工具,测试接口状态

具体思路:

    1. 前端浏览器选择文件(如果默认没有超过切割大小将使用默认上传,否则将进行文件切割上传)

    2. 前端使用新的特性将文件进行切割成一片一片的子文件,并每次分配一个请求

    3. 后端接受文件,将子文件进行存储

    4. 后端根据请求参数判断,如果为最后一次切割文件上传,则执行切割文件重组

    5. 重组文件,并清除临时存储的子文件

前端切割文件代码:

        //切割大文件
cutFile:function(file,cutSize){
var count = file.size / cutSize | 0 ,fileArr = [];
for (var i= 0; i< count ; i++){
fileArr.push({
name:file.name+".part"+(i+1),
file:file.slice( cutSize * i , cutSize * ( i + 1 ))
});
};
fileArr.push({
name:file.name+".part"+(count+1),
file:file.slice(cutSize*count,file.size)
});
return fileArr;
}

前端切割文件上传代码:

        /*
* ajax大文件切割上传(支持单个文件) -- level2的新特性,请保证你的项目支持新的特性再使用
* url 文件上传地址
* fileSelector input=file 选择器
* cutSize 切割文件大小
* fileType 文件限制类型 mime类型
* successEvent 上传成功处理
* progressEvent 上传进度事件
* errorEvent 上传失败处理
* timeoutEvent 超时处理事件
*
* return: status: 0 请选择文件
* 1 非允许文件格式
* */
upload_big:function(url,fileSelector,cutSize,fileType,successEvent,progressEvent,errorEvent,timeoutEvent){
var file = document.querySelector(fileSelector).files,result ={};
//以下为上传文件限制检查
if (file.length === 1){
if (fileType != "*"){
if (fileType.indexOf(file.type)=== -1 ){
result["status"] = 1;
result["errMsg"] = "非允许文件格式";
}
}
}else{
result["status"] = 0;
result["errMsg"] = "请选择文件/只能上传一个文件";
};        if (result.status !== undefined)  return result;   //如果有错误信息直接抛出去,结束运行
//判断上传文件是否超过需要切割的大小
if (file[0].size > cutSize){
var fileArr = tool.cutFile(file[0],cutSize); //切割文件
cutFile_upload(fileArr);
}else{
return tempObj.upload(url,fileSelector,file[0].size,fileType,successEvent,errorEvent,timeoutEvent);
}; /*
* 切割文件上传,配合后台接口进行对接
* 传输参数:
* count -- 当前传输part的次数
* name -- 做过处理的文件名称
* file -- 上传的.part的切割文件
* isLast -- 是否为最后一次切割文件上传(默认值:"true" 字符串,只有最后一次才附加)
* */
function cutFile_upload(fileArr,count){
var formData = new FormData();
if (count == undefined){
count = 0;
formData.append("count",count);
formData.append("name",fileArr[0].name);
formData.append("file".name,fileArr[0].file);
}else{
if (count === fileArr.length-1){
formData.append("isLast","true")
};
formData.append("count",count);
formData.append("name",fileArr[count].name);
formData.append("file".name,fileArr[count].file);
};
var ajaxParam ={
type:"post",
url:url,
data:formData,
isFormData:true,
success:function(data){
/*
* data 参数设置 需要后台接口配合
* 建议:如果后台成功保存.part文件,建议返回下次所需要的部分,比如当前发送count为0,则data返回下次为1。
* 如果保存不成功,则可false,或者返回错误信息,可在successEvent中处理
*
* */
progressEvent(count+1,fileArr.length); //上传进度事件,第一个参数:当前上传次数;第二个参数:总共文件数 var currCount = Number(data);
if (currCount){
if (currCount != fileArr.length){
cutFile_upload(fileArr,currCount);
};
};
successEvent(data); //成功处理事件
},
error:errorEvent,
timeout:timeoutEvent
};
ajax.common(ajaxParam);
}
}

后端文件重组代码(.NET webAPI)-- 其他任何后端语言思想是通用的:

        [Route("upload5")]
public int Post_bigFile1()
{
//前端传输是否为切割文件最后一个小文件
var isLast = HttpContext.Current.Request["isLast"];
//前端传输当前为第几次切割小文件
var count = HttpContext.Current.Request["count"];
//获取前端处理过的传输文件名
string fileName = HttpContext.Current.Request["name"];
//存储接受到的切割文件
HttpPostedFile file = HttpContext.Current.Request.Files[]; //处理文件名称(去除.part*,还原真实文件名称) string newFileName = fileName.Substring(, fileName.LastIndexOf('.'));
//判断指定目录是否存在临时存储文件夹,没有就创建
if (!System.IO.Directory.Exists(@"D:\" + newFileName))
{
//不存在就创建目录
System.IO.Directory.CreateDirectory(@"D:\" + newFileName);
}
//存储文件
file.SaveAs("D:\\" + newFileName + "\\" + HttpContext.Current.Request["name"]);
//判断是否为最后一次切割文件传输
if (isLast == "true")
{
//判断组合的文件是否存在
if (File.Exists(@"L:\\" + newFileName))//如果文件存在
{
File.Delete(@"L:\\" + newFileName);//先删除,否则新文件就不能创建
}
//创建空的文件流
FileStream FileOut = new FileStream(@"L:\\" + newFileName, FileMode.CreateNew,FileAccess.ReadWrite);
BinaryWriter bw = new BinaryWriter(FileOut);
//获取临时存储目录下的所有切割文件
string[] allFile = Directory.GetFiles("D:\\" + newFileName);
//将文件进行排序拼接
allFile = allFile.OrderBy(s => int.Parse(Regex.Match(s, @"\d+$").Value)).ToArray();
//allFile.OrderBy();
for (int i = ; i < allFile.Length; i++)
{
FileStream FileIn = new FileStream(allFile[i], FileMode.Open);
BinaryReader br = new BinaryReader(FileIn);
byte[] data = new byte[]; //流读取,缓存空间
int readLen = ; //每次实际读取的字节大小
readLen = br.Read(data,, data.Length);
bw.Write(data,, readLen);
//关闭输入流
FileIn.Close();
};
//关闭二进制写入
bw.Close();
FileOut.Close();
}
return int.Parse(count) + ;
}

以下为测试代码:

  html页面代码:

选择文件:<input type="file" id="file1" multiple accept="*"/><br />
<input type="button" id="upload" value="上传" />

  js代码:

$("#upload").click(function () {
var temp = ajax.upload_big("/api/ajaxUpload/upload5/","#file1",1024*1024,"*",function(x){},function(count,all){console.log("当前传输进度:"+count+"/"+all);})
});

浏览器测试结果:

  IE10-11:

前端通信:ajax设计方案(四)--- 集成ajax上传技术  大文件/超大文件前端切割上传,后端进行重组

前端通信:ajax设计方案(四)--- 集成ajax上传技术  大文件/超大文件前端切割上传,后端进行重组

  chrome

前端通信:ajax设计方案(四)--- 集成ajax上传技术  大文件/超大文件前端切割上传,后端进行重组

  opera:

前端通信:ajax设计方案(四)--- 集成ajax上传技术  大文件/超大文件前端切割上传,后端进行重组

  火狐

前端通信:ajax设计方案(四)--- 集成ajax上传技术  大文件/超大文件前端切割上传,后端进行重组

  edge

前端通信:ajax设计方案(四)--- 集成ajax上传技术  大文件/超大文件前端切割上传,后端进行重组

  360浏览器

前端通信:ajax设计方案(四)--- 集成ajax上传技术  大文件/超大文件前端切割上传,后端进行重组

代码已集成github:https://github.com/GerryIsWarrior/ajax     点颗星星是我最大的鼓励,有什么问题可以博客、邮箱、github上留言

这一次上传版本,代码做过变动,变动如下:

  1. 增加大文件传输方法upload_big,工具类增加文件切割tool.cutFile
  2. 解决火狐浏览器默认要求后台返回xml类型的问题

遗留问题待确认:这次safair浏览器没有测试,因为File对象的slice方法不支持,加各种前缀测试都不支持,主要我是window版的safair,这个问题先记着,有测试过的兄弟可以帮忙看一下,我的window版safair浏览器是不支持的。

还有最重要的一点,如果有问题欢迎指出来,我在github上维护这个库,这段时间专注于前端的通信技术的研究,第一个阶段是ajax的通信技术,后期包括服务器的SSE推送技术,还有webScoket技术。

其实研究这个技术最大的感慨就是,本来前端切割文件相对来说简单,但是后台文件重组有点问题,查阅各种资料,*去谷歌等等,搞了好长一段时间才把后台接口的设计和实现完善。以后技术的发展不仅仅局限于一端的,所以能全栈发展就全栈发展,新的前端技术,都是需要后台进行配合才可以溜起来。对了,其实这些东西国外11年左右就开始搞了,国内还是相对不是很跟进,这次去外面看看发现了好多东西,还是需要多看看的,增长技术视野的。哦了,吃饭去了,再不吃要饿死了。

我的前端分布式,容器化,组件化的框架正在从无到有,到时候欢迎大家给建议和指正,3q。

再啰嗦几句,马上要过年了,大家吃好喝好玩好,来年继续奋战。代码改变世界。

上一篇:框架基础:ajax设计方案(三)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组


下一篇:前端笔记之微信小程序(三)GET请求案例&文件上传和相册API&配置https