首页 > 代码库 > HTML5 大文件上传示例

HTML5 大文件上传示例

2024-08-18 17:06:22   221人阅读

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>HTML5大文件分片上传</title>
        <script src="js/spark-md5.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var page = {
                init: function() {
                    $("#upload").click($.proxy(this.upload, this));
                    $("#download").click($.proxy(this.download, this));
                },

                upload: function() {
                    var file = $("#file")[0].files[0], //文件对象
                        name = file.name, //文件名
                        size = file.size, //总大小
                        succeed = 0,
                        spark = new SparkMD5();//计算文件的MD5值
                        
                    var shardSize = 2 * 1024 * 1024, //以2MB为一个分片
                        shardCount = Math.ceil(size / shardSize); //总片数
                    var checkJson = {};//接口需要
                        checkJson.plat = {};
                        checkJson.data = {};
                        checkJson.data.filename = name;
                        checkJson.data.filesize = size;
                        checkJson.data.filechunksize = shardSize;
                        checkJson.data.filemd5 = spark.end();//文件的MD5值
                        checkJson.data.creator = ‘zhanshancheng‘;
                        var checkJsonStr = JSON.stringify(checkJson);
                        console.log(shardCount);
                        var i = 0;
                        
                        function shardCountIndex (){
                            //构造一个表单，FormData是HTML5新增的
                            var fileForm = new FormData();
                            
                            //计算每一片的起始与结束位置
                            var start = i * shardSize,
                                end = Math.min(size, start + shardSize);
                            
                            //Ajax提交
                            $.ajax({
                                url: "http://10.35.1.95:18000/check_upload",
                                type: "POST",
                                cache: false,
                                data: checkJsonStr,
                                async: true, //异步
                                processData: false, //很重要，告诉jquery不要对form进行处理
                                contentType: false, //很重要，指定为false才能形成正确的Content-Type
                                success: function(date1) {
                                    console.log(date1);
                                    /*{
                                        success: true,
                                        plat: {}
                                        data: {
                                            _id:String,//上传文件在MongoDB唯一编码
                                            status:Number,//状态0未上传,1已传完,2未传完待续传  
                                            curpos:Number,//已传位置             
                                        },
                                        error:{//success=false才返回，错误信息及错误码
                                            msg:"",
                                            code:""
                                        }
                                    }*/
    
                                    fileForm.append("jsonData",‘{"plat":"{}","data":{"_id":"‘+date1.data._id+‘","curpos":"‘+end+‘"}}‘)
                                    fileForm.append("data", file.slice(date1.data.curpos, end)); //slice方法用于切出文件的一部分
                                    if(date1.success){
                                        $.ajax({
                                            url: "http://10.35.1.95:18000/upload",
                                            type: "POST",
                                            cache: false,
                                            data: fileForm,
                                            async: true, //异步
                                            processData: false, //很重要，告诉jquery不要对form进行处理
                                            contentType: false, //很重要，指定为false才能形成正确的Content-Type
                                            success: function(date2) {
                                                ++succeed;
                                                $("#output").text(succeed + " / " + shardCount);
                                                console.log(date2);
                                                /*
                                                {
                                                    success:true,
                                                    plat:{},
                                                    data:{
                                                        _id:String,//上传文件在MongoDB唯一编码
                                                        status:Number,//状态0未上传,1已传完,2未传完待续传  
                                                        curpos:Number,//已传位置             
                                                    },
                                                    error:{//success=false才返回，错误信息及错误码
                                                        msg:"",
                                                        code:""
                                                    } 
                                                }
                                                 */
                                                if (i < shardCount) {//i小于总片数就继续
                                                    shardCountIndex();
                                                    i++;
                                                } else{
                                                    return;
                                                }
                                                
                                            }
                                        });
                                    }                                
                                }
                            });
                            
                        }

                        
                        shardCountIndex();


                },
                download: function(){
                    
                }
            };
            $(function() {
                page.init();
            });
        </script>
    </head>

    <body>
        <form id="uploadForm" enctype="multipart/form-data">
            <input id="file" type="file" name="file"/>
            <button id="upload" type="button">upload</button>
            <span id="output" style="font-size:12px">等待</span>
        </form>
        <button id="download" type="button">download</button>
    </body>

</html>

 

HTML5 大文件上传示例


联系
我们