Project-Wing
/
vStationURM


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
							<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>上传文件</title>
    <link rel="stylesheet" type="text/css" href="../Js/layui/font/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../Js/layui/css/layui.css" />
    <style>
        body {
            font-family: 'Microsoft YaHei';
        }

        .hidden {
            display: none;
        }

        .middle-align {
            vertical-align: middle;
            text-align: center;
        }

        .icon-shangchuan1 {
            font-size: 50px;
        }

        .layui-footer {
            background-color: transparent !important;
            left: 0 !important;
            vertical-align: middle !important;
            text-align: center !important;
            padding: 10px !important;
        }

        .layui-form {
            padding: 15px !important;
        }

        p {
            padding: 5px;
        }

        .layui-form-label {
            text-align: left !important;
        }

        .layui-form {
            padding: 0px !important;
        }

        .layui-form-item {
            margin: 15px !important;
        }

        .webuploader-element-invisible {
            display:none;
        }

        .fileinfo {
            padding: 10px;
        }
    </style>
</head>
<body>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/webuploader/webuploader.js"></script>
    <script src="../Js/layui/layui.all.js"></script>
    <script src="../Js/Common.js"></script>
    <form class="layui-form middle-align" onkeydown="if(event.keyCode==13)return false;">
        <div class="layui-form-item layui-layout-admin middle-align">
            <div>
                <div class="layui-upload-drag middle-align" id="uploadFile">
                    <i class="iconfont icon-shangchuan1"></i>
                    <p id="uploadTips"></p>
                    </div>
                </div>
            </div>
            <div class="fileinfo hidden">
                <p id="uploadingTips"></p>
                <p id="fileName"></p>
                <p id="fileSize"></p>
            </div>
            <div class="fileinfo hidden">
                <div class="layui-progress" id="uploadProgress" lay-filter="uploadProgress" lay-showpercent="true">
                    <div class="layui-progress-bar layui-bg-blue" lay-percent=""></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-layout-admin">
            <a id="back" class="layui-btn layui-btn-primary"></a>
        </div>
    </form>
    <script>
        var intervalHandle;
        var param = layui.getParams();
        var currId = parseInt(param.currId);
        var currUser = param.currUser;
        layui.$("#uploadTips").text(layui.translater("UploadTips"));
        layui.$("#uploadingTips").text(layui.translater("Uploading"));
        layui.$("#back").text(layui.translater("Cancel"));

        var fileSize;
        var fileMd5;
        var uploadChunks;
        var GUID = WebUploader.Base.guid();//一个GUID
        WebUploader.Uploader.register({
            "before-send": "beforeSend"
        }, {
            beforeSend: function (block) {
                var task = WebUploader.Deferred();
                if (uploadChunks != null && (uploadChunks.indexOf("," + block.chunk + ",") > -1 || uploadChunks.indexOf("%%%") > -1)) {
                    task.reject();
                } else {
                    task.resolve();
                }
                return task.promise();
            }
        });
        //请求服务器查询有哪些分片已上传
        var uploader = WebUploader.create({
            swf: '../js/webuploader/Uploader.swf',
            server: '/CloudDisk/Upload/UploadFile',
            pick: '#uploadFile',
            dnd: 'body',//设置dnd为整个页面
            resize: false,
            chunked: true,//开始分片上传
            threads: 4,
            chunkSize: 4096000,//每一片的大小
            auto: false,
            extensions: 'zip',
            formData: {
                guid: GUID
            }
        });
        uploader.on('fileQueued', function (file) {
            fileSize = (parseFloat(file.size) / 1048576).toFixed(2);
            if (fileSize > 500) {
                window.top.layer.alert(layui.translater("FileSizeAstrict") + "500M");
                return false;
            }
            layui.$("#uploadFile").addClass("hidden");
            layui.$(".fileinfo").removeClass("hidden")
            layui.$("#fileName").text(layui.translater("FileName") + ":\r\n" + file.name);
            layui.$("#fileSize").text(layui.translater("FileSize") + ":\r\n" + fileSize + "M")
            layui.element.progress('uploadProgress', '1%');
            layui.element.render();
            //获取文件MD5值
            uploader.md5File(file, 0, 10 * 1024 * 1024)
                // 完成
                .then(function (md5) {
                    fileMd5 = md5;
                    uploader.options.formData.fileMd5 = md5;
                    if (uploadChunks == null || uploadChunks.indexOf(file.name + ":") == -1) {
                        layui.$.post("/CloudDisk/Upload/CheckUpload", { "fileMd5": fileMd5 }, function (res) {
                            uploadChunks = file.name + ":," + res.chunks + ",";
                            uploader.upload();
                            intervalHandle = self.setInterval(function () {
                                layui.$.post("/CloudDisk/Upload/GetUploadProgress", { "guid": GUID }, function (prog) {
                                    var progressNumber = Number(prog.progress);
                                    if (progressNumber > 0) {
                                        $("#progressText").text((0.59 * progressNumber + 40).toFixed(0) + '%');
                                        layui.element.progress('uploadProgress', (0.59 * progressNumber + 40).toFixed(0) + '%');
                                    }
                                });
                            }, 3000);
                        });
                    }
                });
        });
        uploader.on('uploadProgress', function (file, percentage) {
            $("#progressText").text(Math.floor(percentage * 40).toFixed(0) + '%');
            layui.element.progress('uploadProgress', Math.floor(percentage * 40).toFixed(0) + '%');
        });
        uploader.on('uploadSuccess', function (file) {
            if (uploadChunks.indexOf("%%%") > -1) {
                window.top.layer.alert(layui.translater("FileExists"));
                layui.$("#back").click();
                return false;
            }
            else {
                layui.$.post('/CloudDisk/Upload/Merge', { fileMd5, guid: GUID, fileName: file.name, currUser, currId, fileSize }, function (res) {
                    layui.element.progress('uploadProgress', '100%');
                    layui.$("#back").click();
                    return false;
                });
            }
        });
        uploader.on('uploadError', function () {
            layui.$("#back").click();
            window.top.layui.layer.alert(layui.translater("UploadFaild"));
        });

        layui.elementOn("#back", "click", function () {
            if (parent.loadPage) {
                parent.loadPage();
            }
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    </script>
</body>
</html>