利用HTML5分片上传超大文件 推荐 原创 BoyTNT 2014-09-15 10:33:09 博主文章分类:前端技术 ©著作权 文章标签 大文件 html5 文章分类 HTML5 移动开发 ©著作权归作者所有:来自51CTO博客作者BoyTNT的原创作品,请联系作者获取转载授权,否则将追究法律责任 在网页中直接上传大文件一直是个比较头疼的问题,主要面临的问题一般包括两类:一是上传时间长中途一旦出错会导致前功尽弃;二是服务端配置复杂,要考虑接收超大表单和超时问题,如果是托管主机没准还改不了配置,默认只能接收小于4MB的附件。比较理想的方案是能够把大文件分片,一片一片的传到服务端,再由服务端合并。这么做的好处在于一旦上传失败只是损失一个分片而已,不用整个文件重传,而且每个分片的大小可以控制在4MB以内,服务端不用做任何设置就可适应。常用的解决方案是RIA,以flex为例,通常是利用FileReference.load方法加载文件得到ByteArray,然后分片构造表单(flash的高版本不允许直接访问文件)。不过这个load方法只能加载较小的文件,大约不超过300MB,因此适用性不是很强。好在现在有了HTML5,我们可以直接构造分片了,这是一个非常喜人的进步,只可惜目前适用面不广(IE啊IE,真是恨你恨得牙痒痒)。言归正传,来看一个DEMO吧,基于ASP.Net MVC3,只是示例,很多问题做了简化处理。主要是客户端,新特性都体现在这里:<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>HTML5大文件分片上传示例</title> <script src="../Scripts/jquery-1.11.1.min.js"></script> <script> var page = { init: function(){ $("#upload").click($.proxy(this.upload, this)); }, upload: function(){ var file = $("#file")[0].files[0], //文件对象 name = file.name, //文件名 size = file.size, //总大小 succeed = 0; var shardSize = 2 * 1024 * 1024, //以2MB为一个分片 shardCount = Math.ceil(size / shardSize); //总片数 for(var i = 0;i < shardCount;++i){ //计算每一片的起始与结束位置 var start = i * shardSize, end = Math.min(size, start + shardSize); //构造一个表单,FormData是HTML5新增的 var form = new FormData(); form.append("data", file.slice(start,end)); //slice方法用于切出文件的一部分 form.append("name", name); form.append("total", shardCount); //总片数 form.append("index", i + 1); //当前是第几片 //Ajax提交 $.ajax({ url: "../File/Upload", type: "POST", data: form, async: true, //异步 processData: false, //很重要,告诉jquery不要对form进行处理 contentType: false, //很重要,指定为false才能形成正确的Content-Type success: function(){ ++succeed; $("#output").text(succeed + " / " + shardCount); } }); } } }; $(function(){ page.init(); }); </script> </head> <body> <input type="file" id="file" /> <button id="upload">上传</button> <span id="output" style="font-size:12px">等待</span> </body> </html>这里的slice方法和FormData都是html5之前不存在的。通过这样的方法,我们的表单构造出来是这样的,抓包看看:可以看到构造出来的Content-Type是multipart/form-data,也就是符合RFC标准的那个最传统的文件上传表单。另外我们同时传输的name、total等属性也都在表单里。然后是服务端,没什么新鲜的,完全是在接收一个普通的文件:[HttpPost] public ActionResult Upload() { //从Request中取参数,注意上传的文件在Requst.Files中 string name = Request["name"]; int total = Convert.ToInt32(Request["total"]); int index = Convert.ToInt32(Request["index"]); var data = Request.Files["data"]; //保存一个分片到磁盘上 string dir = Server.MapPath("~/Upload"); string file = Path.Combine(dir, name + "_" + index); data.SaveAs(file); //如果已经是最后一个分片,组合 //当然你也可以用其它方法比如接收每个分片时直接写到最终文件的相应位置上,但要控制好并发防止文件锁冲突 if(index == total) { file = Path.Combine(dir, name); var fs = new FileStream(file, FileMode.Create); for(int i = 1;i <= total;++i) { string part = Path.Combine(dir, name + "_" + i); var bytes = System.IO.File.ReadAllBytes(part); fs.Write(bytes, 0, bytes.Length); bytes = null; System.IO.File.Delete(part); } fs.Close(); } //返回是否成功,此处做了简化处理 return Json(new { Error = 0 }); }上面的DEMO很多问题是简化处理的,比如没做什么异常处理,客户端也没有判断服务端是否出错重试一类的,各位可以自己完善。在上面的基础上,我们可以做很多功能上的扩展,比如我们可以控制所有分片是顺序上传还是并发上传,以适用不同应用。再比如我们可以在整体文件上传前以及分片上传前都先计算一下相应的HASH,发个请求询问服务器文件是否已存在,如果存在就不要重复上传了,这样就实现了“极速上传”以及“断点续传”。 赞 收藏 评论 分享 举报 上一篇:三亚度假 下一篇:机器学习算法:k近邻 提问和评论都可以,用心的回复会被更多人看到 评论 发布评论 全部评论 () 最热 最新 相关文章 大文件的OSS分片上传(完整代码示例) 分片上传,就是将所要上传的文件,按照一定的大小,将整个文件分隔成多个数据块(称之为Part)来进行分别上传,上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件。分片上传不仅可以避免因网络环境不好导致的一直需要从文件起始位置上传的问题,还能使用多线程对不同分块数据进行并发发送,提高发送效率。 存储空间 分片上传 大文件上传 Java文件上传 git怎么上传大文件?解决git上传大文件报错failed to push some refs to 'xxx.git' 在我们的项目文件中,如果有大文件,那么我们在使用git push的时候会遇到文件过大的问题,本博文就是教大家如何解决git无法push大文件的问题。 git github 报错信息 一文掌握 Vue3 + Express 大文件分片上传、断点续传、秒传技巧! 前言在日常开发中,文件上传是常见的操作之一。文件上传技术使得用户可以方便地将本地文件上传到Web服务器上,这在许多场景下都是必需的,比如网盘上传、头像上传等。 但是当我们需要上传比较大的文件的时候,容易碰到以下问题:上传时间比较久;中间一旦出错就需要重新上传;一般服务端会对文件的大小进行限制。这几个问题会导致上传时候的用户体验是很不好的,针对存在的这些问题,我们可以通过分片上传来解决。原理分片上传 文件上传 商城源码 免费源码 Express vue 利用html5分片上传超大文件 在上面的基础上,我们可以做很多功能上的扩展,比如我们可以控制所有分片是顺序上传还是并发上传,以适用不同应用。再比如我们可以在整体文件上传前以及分片上传前都先计算一下相应的HASH,发个请求询问服务器文件是否已存在,如果存在就不要重复上传了,这样就实现了“极速上传”以及“断点续传”。原文链接:https://blog.csdn.net/BoyTNT/article/details/82809066 html5 js+HTML5分片上传大文件 需求: 项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在20G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以20G来进行限制。 PC端全平台支持,要求支持Windows,Mac,Linux 支持所有浏览器。 支持文件批量上传 支持文件夹上传,且要求在服务端保留层级结 js+HTML5分片上传大文件 java 编程 HTML 文件上传 html5超大文件上传 最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文 html5超大文件上传 html5 大文件分片上传处理 核心原理: 该项目核心就是文件分块上传。前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题。 * 如何分片; * 如何合成一个文件; * 中断了从哪个分片开始。 如何分,利用强大的js库,来减轻我们的工作,市场上已经能有关于大文件分块的轮子,虽然程序员的天 HTML5 求超大文件上传方案( HTML5 ) 1,项目调研 因为需要研究下断点上传的问题。找了很久终于找到一个比较好的项目。 在GoogleCode上面,代码弄下来超级不方便,还是配置hosts才好,把代码重新上传到了github上面。 https://github.com/freewebsys/java-large-file-uploader 项目调研 HTML5实现大文件分片上传方案 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。 首先我们需要了解的是上传文件三要素: 1.表单提交方式:post (get方式提交有大小限制,post没有) 2.表单的enctype属性:必须设置为multipart/form-data 大文件分片上传方案 html5分割上传实现超大文件无插件网页上传 一、 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传;支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。 支持文件夹批量上传下载,服务器端保留文件夹层级结构,服务器端文件夹层级结 超大文件无插件网页上传 HTML5实现大文件分片上传分享 文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); this.root.put("f_id", ""); this.root.put("f_name HTML5 HTML5实现大文件分片上传技术 需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。 第一步: 前端修改 由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify文件 HTML5 HTML5实现大文件分片上传示例 4GB以上超大文件上传和断点续传服务器的实现 随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求。 但是在很多情况下,平台运营方并没有大文件上传和断点续传的开发经验,往往在网上找一些简单的PHP或者Java程序来实现基本的上传功能,然而在实际 HTML5 HTML5实现大文件分片上传源码 文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦、缺乏交互、用户体验差。 一、前端代码 英国程序员Remy Sharp总结了这些新的接口 ,本文在他的基础之上,讨论在前端采用HTML5的API,对文件上传进行渐进式增强: * iframe上传 * ajax上传 * 进度条 HTML5 HTML5怎么实现大文件分片上传 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。 首先我们需要了解的是上传文件 HTML5实现大文件分片上传工具 HTML5实现大文件分片上传插件 javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1. 通过form表单向后端发送请求 HTML5实现大文件分片上传插件 HTML5实现大文件分片上传控件 1、介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码。 enctype作用是告知服务器请求正文的MIME类型(请求消息头content- HTML5实现大文件分片上传控件 HTML5实现大文件分片上传组件 javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 HTML5实现大文件分片上传组件 HTML5怎样实现大文件分片上传 一、 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传;支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的 HTML5实现大文件分片上传工具 html5大文件分片上传插件 前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践。该博客重在实践。 一. Http协议原理简介 HTTP是一个属于应用层的面向对象的协议,由于其简捷、 上传大文件(10G)的解决方案