h5文件分块上传

最新推荐文章于 2024-07-15 15:33:33 发布

灿尔哈擦苏

最新推荐文章于 2024-07-15 15:33:33 发布

阅读量3.8k

点赞数

分类专栏： web前端开发文章标签：大文件上传异步上传文件 h5大文件上传大文件分块上传 file上传大文件

web前端开发专栏收录该内容

82 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>大文件上传</title>
    <script src="jquery-2.1.0.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 = 4 * 1024 * 1024,    //以4MB为一个分片
                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(){
                       //成功后的事件
                    }
                });
            }
        }
    };
    $(function(){
        page.init(); //初始化
    });
    </script>
</head>
<body>
    <input type="file" id="file" />
    <button id="upload">上传</button>
    <span id="output">等待中</span>
</body>
</html>