js教程

HTML5实现大文件分片上传

我的站长站 2022-12-27 人阅读

上传大文件一直是个比较头疼的问题,一是上传时间长,中途一旦出错会导致前功尽弃;二是服务端配置复杂,要考虑接收超大表单和超时问题,如果是托管主机没准还改不了配置,默认只能接收小于4MB的附件。

比较理想的方案是能够把大文件分片,一片一片的传到服务端,再由服务端合并。这么做的好处在于一旦上传失败只是损失一个分片而已,不用整个文件重传,而且每个分片的大小可以控制在4MB以内,服务端不用做任何设置就可适应。

常用的解决方案是RIA,以flex为例,通常是利用FileReference.load方法加载文件得到ByteArray,然后分片构造表单(flash的高版本不允许直接访问文件)。不过这个load方法只能加载较小的文件,大约不超过300MB,因此适用性不是很强。

好在现在有了HTML5,我们可以直接构造分片了,这是一个非常喜人的进步,但是有一个最大的缺陷就是,不支持IE啊,不支持IE啊,不支持IE啊。

<script type="text/javascript">
$("#file").change(function(event) {
    var file = $("#file")[0].files[0];
    PostFile(file,0);});function PostFile(file,i){
    var name = file.name,        //文件名
    size = file.size,        //总大小shardSize = 2 * 1024 * 1024,
    shardSize = 2 * 1024 * 1024,//以2MB为一个分片
    shardCount = Math.ceil(size / shardSize);  //总片数
    if(i >= shardCount){
        return;
    }
    //计算每一片的起始与结束位置
    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("lastModified", file.lastModified); //slice方法用于切出文件的一部分
    form.append("name", name);
    form.append("total", shardCount);  //总片数
    form.append("index", i + 1);        //当前是第几片
    //Ajax提交
    $.ajax({
        url: '{:url("picture/video")}?type=2',
        type: "POST",
        data: form,
        async: true,        //异步
        processData: false,  //很重要,告诉jquery不要对form进行处理
        contentType: false,  //很重要,指定为false才能形成正确的Content-Type
        success: function(data){
            if(data){
                i = data++;
                var num = Math.ceil(i*100 / shardCount);
                console.log(num+'%');
                PostFile(file,i);
            }
        }
    });}</script>


相关推荐
  • 大文件上传
  • 分片上传
  • php+ajax大文件分片上传示例代码

    代码思路PHP在上传超大的文件时,不能只让后端PHP上传,会容易上传到一半内测益处失效。需要前端要和后端相互配合一起来处理,文件上传要使用ajax的方法,而不是form的submit的方式。前端把file文件对象按一定的大小分割成一定大小的文件(如按2M或5M来分割),对...

    php教程 42 1年前
  • 宝塔面板环境上传大文件失败配置方法

    宝塔面板环境上传100M大小的文件,在上总是报错,但是在本地可以正常上传。上传小一点的文件,就不报错。代码和nginx和php的配置文件都设置了150M,超时时间也设置了,应该没啥问题。但就是报错。百度好久,网上说的答案都试了,没效果。解决方法1、fread()的方法...

    宝塔面板 174 1年前
  • php上传大文件必备配置方法

    项目要求如果你的项目需要用到大文件上传或下载功能,就必须首先修改PHP的配置才行,否则上传或下载操作就会超时,操作失败。操作步骤打开php配置文件php.ini,首先找到; file uploads ;区域,有影响文件上传的以下几个参数:file_uploads = on ;//是否允许...

    php教程 50 1年前
  • 大文件分片上传 / 下载限速解决方案

    分片上传将需要上传的文件按照一定的分割规则,分割成相同大小的数据块;初始化一个分片上传任务,返回本次分片上传唯一标识;按照一定的策略(串行或并行)发送各个分片数据块;发送完成后,服务端根据判断数据上传是否完整,如果完整,则进行数据块合成得到原始文件。...

    php教程 38 1年前
  • HTML5实现大文件分片上传

    上传大文件一直是个比较头疼的问题,一是上传时间长,中途一旦出错会导致前功尽弃;二是服务端配置复杂,要考虑接收超大表单和超时问题,如果是托管主机没准还改不了配置,默认只能接收小于4MB的附件。比较理想的方案是能够把大文件分片,一片一片的传到服务端,再...

    js教程 20 1年前
  • php+ajax大文件分片上传示例代码

    代码思路PHP在上传超大的文件时,不能只让后端PHP上传,会容易上传到一半内测益处失效。需要前端要和后端相互配合一起来处理,文件上传要使用ajax的方法,而不是form的submit的方式。前端把file文件对象按一定的大小分割成一定大小的文件(如按2M或5M来分割),对...

    php教程 42 1年前
最新更新
  • js截取字符串教程

    slice()方法接受两个参数,起始索引和结束索引(可选)。它返回从起始索引到结束索引(不包括结束索引)之间的子字符...

    js教程 1个月前
  • find findIndex indexOf索引选择器使用方法

    find使用方法find方法是ES6引入的一种数组方法,可以用来查找数组中符合条件的元素。语法是:array.find(callba...

    js教程 2个月前
  • js复制网页内容教程

    Async Clipboard API方法HTML5新增的方法,无需引入第三方插件,直接就可以复制内容。低版本的浏览器可能会不兼...

    js教程 2个月前
  • js获取字符长度函数分享

    js获取字符长度函数function objLen(str) { if (str == null) return 0; if (typeof str != "string") { ...

    js教程 2个月前
  • 网站LED跑马灯效果广告代码

    网站可以看到很多的论坛网站都会用到这种网站LED跑马灯效果,这种效果实现也很简单,分享给大家。LED跑马灯效果...

    js教程 3个月前