前端通信:ajax设计方案(四)--- 集成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[0];

            //处理文件名称(去除.part*,还原真实文件名称)

            string newFileName = fileName.Substring(0, 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 = 0; i < allFile.Length; i++)
                {
                    FileStream FileIn = new FileStream(allFile[i], FileMode.Open);
                    BinaryReader br = new BinaryReader(FileIn);
                    byte[] data = new byte[1048576];   //流读取,缓存空间
                    int readLen = 0;                //每次实际读取的字节大小
                    readLen = br.Read(data,0, data.Length);
                    bw.Write(data,0, readLen);
                    //关闭输入流
                    FileIn.Close();
                };
                //关闭二进制写入
                bw.Close();
                FileOut.Close();
            }
            return int.Parse(count) + 1;
        }

 

以下为测试代码:

  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:

  chrome

  opera:

  火狐

  edge

  360浏览器

 

 代码已集成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技术。

 

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

 

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

 

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

目录
相关文章
|
10天前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
40 2
|
24天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
37 3
|
2月前
|
缓存 前端开发 JavaScript
微前端集成优化:让所有子应用体积更小,加载更快!
【8月更文挑战第17天】微前端集成优化:让所有子应用体积更小,加载更快!
46 1
微前端集成优化:让所有子应用体积更小,加载更快!
|
1月前
|
机器学习/深度学习 DataWorks 数据挖掘
基于阿里云Hologres和DataWorks数据集成的方案
基于阿里云Hologres和DataWorks数据集成的方案
41 7
|
2月前
|
前端开发 Java Maven
【前端学java】全网最详细的maven安装与IDEA集成教程!
【8月更文挑战第12天】全网最详细的maven安装与IDEA集成教程!
71 2
【前端学java】全网最详细的maven安装与IDEA集成教程!
|
10天前
|
JSON 前端开发 JavaScript
跨越跨域大山,前端不得不知道的Ajax
该文章介绍了AJAX技术的基本使用方法,包括GET和POST请求的模拟,并探讨了浏览器同源策略及其对跨域请求的影响,同时还提出了JSONP和CORS作为解决跨域问题的方案。
|
2月前
|
前端开发 Linux API
无缝融入,即刻智能[一]:Dify-LLM大模型平台,零编码集成嵌入第三方系统,42K+星标见证专属智能方案
【8月更文挑战第3天】无缝融入,即刻智能[一]:Dify-LLM大模型平台,零编码集成嵌入第三方系统,42K+星标见证专属智能方案
无缝融入,即刻智能[一]:Dify-LLM大模型平台,零编码集成嵌入第三方系统,42K+星标见证专属智能方案
|
2月前
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
34 0
|
2月前
|
前端开发 Devops 持续交付
【前端自动化新高度】Angular与Azure DevOps完美结合:从零构建持续集成与持续部署的全自动流水线,提升开发效率与软件交付质量!
【8月更文挑战第31天】Angular作为领先的前端框架,以强大功能和灵活性深受开发者喜爱。Azure DevOps提供一站式DevOps服务,涵盖源码管理、持续集成(CI)及持续部署(CD)。本文将指导你如何在Azure DevOps中搭建Angular项目的CI/CD流程,并通过具体示例代码展示整个过程。首先,我们将创建一个Angular项目并初始化Git仓库;然后,在Azure DevOps中设置CI流水线,定义YAML文件以自动化构建和部署流程。最终实现每次提交代码后自动构建并部署至Azure Web App,极大提升了开发效率和软件交付速度,使团队更专注于创新。
21 0
|
2月前
|
前端开发 JavaScript API
Web服务器与前端技术的集成
【8月更文第28天】随着Web开发技术的发展,现代前端框架如React、Vue.js等已经成为构建复杂Web应用的标准工具。为了提供更好的用户体验,这些前端应用通常需要与后端Web服务器进行紧密集成。本文将详细介绍如何将React和Vue.js与后端Web服务器无缝集成,以创建高性能且用户友好的Web应用。
26 0
下一篇
无影云桌面