zoro
/
file_slice


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS分片上传-极速上传</title>
</head>
<body>
<input type="file" name="slice" id="slice" >
<br/>
</body>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $("#slice").change(function(event) {
        var file = $("#slice")[0].files[0];
        PostFile(file,0);
    });
    //执行分片上传
    function PostFile(file,i, uuid){
        var name = file.name,                           //文件名
            size = file.size,                           //总大小
            shardSize = 10 * 1024 * 1024,                //以10MB为一个分片,每个分片的大小
            shardCount = Math.ceil(size / shardSize);   //总片数
        if(i >= shardCount){
            return;
        }
        //判断uuid是否存在
        if (uuid === null || uuid === undefined) {
            uuid = guid();
        }
        //console.log(size,i+1,shardSize);  //文件总大小，第一次，分片大小//
        var start = i * shardSize;
        var end = start + shardSize;
        var packet = file.slice(start, end);  //将文件进行切片
        /*  构建form表单进行提交  */
        var form = new FormData();
        form.append("uuid", uuid);// 前端生成uuid作为标识符传个后台每个文件都是一个uuid防止文件串了
        form.append("data", packet); //slice方法用于切出文件的一部分
        form.append("name", name);
        form.append("totalSize", size);
        form.append("total", shardCount); //总片数
        form.append("index", i + 1); //当前是第几片
        $.ajax({
            url: "http://127.0.0.1:9097/index/doPost",
            type: "POST",
            data: form,
            //timeout:"10000",  //超时10秒
            async: true, //异步
            dataType:"json",
            processData: false, //很重要，告诉jquery不要对form进行处理
            contentType: false, //很重要，指定为false才能形成正确的Content-Type
            success: function (msg) {
                console.log(msg);
                /*  表示上一块文件上传成功，继续下一次  */
                if (msg.status === 201) {
                    form = '';
                    i++;
                    PostFile(file, i, uuid);
                } else if (msg.status === 502) {
                    form = '';
                    /*  失败后，每2秒继续传一次分片文件  */
                    setInterval(function () { PostFile(file, i, uuid) }, 2000);
                } else if (msg.status === 200) {
                    merge(uuid, name)
                    console.log("上传成功");
                } else if (msg.status === 500) {
                    console.log('第'+msg.i+'次，上传文件有误！');
                } else {
                    console.log('未知错误');
                }
            }
        })
    }

    function merge(uuid, fileName) {
        $.ajax({
            url: "http://127.0.0.1:9097/index/merge",
            type: "GET",
            data: {uuid: uuid, newFileName: fileName},
            //timeout:"10000",  //超时10秒
            async: true, //异步
            dataType:"json",
            success: function (msg) {
                console.log(msg);
            }
        })
    }

    //生成uuid
    function guid() {
        return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0,
                v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
</script>
</html>