大文附件分片上传

 引用脚本下载地址  提取码：t9bp

 

<link href="webuploader-0.1.5/css/uploadify.css" rel="stylesheet" />
<link href="webuploader-0.1.5/css/webuploader.css" rel="stylesheet" />
<script src="webuploader-0.1.5/dist/webuploader.js"></script>
<script src="js/jquery-extend.js"></script>
<script src="js/jquery.unobtrusive-ajax.js"></script>
<script src="js/layer/layer.js"></script>
<script>
$(function () {
            //显示验证信息
            function validateMessage(file, show, message) {
                var $li = $('#' + file.id);
                if (show) {
                    $li.find('.cancel').show();
                } else {
                    $li.find('.cancel').hide();
                }
                $li.find('span.data').text('-' + message);
            };

            //上传文件
            $("#id").click(function () {
                //页面层
                layer.open({
                    type: 1,
                    title: "上传文件",
                    skin: 'layui-layer-rim', //加上边框
                    area: '540px', //宽高
                    content: '<div id="uploader" class="wu-example">' +
                        '<div id="thelist" class="uploader-list" style="min-height: 420px;"></div>' +
                        '<div class="btns" style="display: inline-block;margin: 10px 170px;">' +
                        '<div id="picker" style="display: inline-block;margin-right: 10px;">选择文件</div>' +
                        '<div id="ctlBtn" class="webuploader-pick">开始上传</div>' +
                        '</div>' +
                        '</div>',
                    end: function () {
                        //layer.load();
                        //window.location.reload();
                    }
                });

                var $list = $('#thelist'),
                    $btn = $('#ctlBtn'),
                    state = 'pending',
                    uploader;

                uploader = WebUploader.create({
                    chunked: true,
                    swf: '/Content/webuploader-0.1.5/dist/Uploader.swf',
                    threads: 1,
                    chunkSize: 100000,//每片大小
                    server: '后台请求地址',
                    pick: '#picker'
                });

                // 当有文件添加进来的时候
                uploader.on('fileQueued', function (file) {
                    $list.append('<div id="' + file.id + '" title="' + file.name + '" class="uploadify-queue-item">' +
                        '<div class="cancel" data-id="' + file.id + '">' +
                        '<a href="javascript:">X</a>' +
                        '</div>' +
                        '<span class="fileName">' + $.omit(file.name, 25) + '（约' + $.bytesToSize(file.size) + '）</span>' +
                        '<span class="data"> -  0%</span>' +
                        '<div class="uploadify-progress">' +
                        '<div class="uploadify-progress-bar" style="width: 0%;">' +
                        '</div>' +
                        '</div>' +
                        '</div>');
                });


                //删除文件队列
                $(".uploader-list").on("click", ".cancel[data-id]", function () {
                    var $this = $(this);
                    $('#' + $this.data("id")).remove();
                    uploader.removeFile(uploader.getFile($this.data("id")));
                });

                //每个文件上传是重新生成唯一标识GUID
                uploader.on('uploadStart', function (file) {
                    $('#' + file.id).find('.cancel').hide();
                    uploader.option("formData", { guid: $.NewGuid(), name: file.name });
                });

                //分片上次时，上传每片服务器所响应的数据
                uploader.on('uploadAccept', function (obj, ret) {
                    //服务器已存在该文件
                    if (!ret.code && ret.code === 0) {
                        uploader.cancelFile(obj.file);
                        validateMessage(obj.file, true, "文件已存在");
                    }
                });

                // 文件上传过程中创建进度条实时显示。
                uploader.on('uploadProgress', function (file, percentage) {
                    var $li = $('#' + file.id),
                        $percent = $li.find('.uploadify-progress .uploadify-progress-bar');
                    var $width = percentage * 100;
                    $li.find('span.data').text('-' + $width.toPrecision(3) + '%');
                    $percent.css('width', $width + '%');
                });

                //上传成功
                uploader.on('uploadSuccess', function (file, response) {
                    validateMessage(file, false, response.message)
                });

                //上传错误
                uploader.on('uploadError', function (file) {
                    validateMessage(file, true, "-上传出错");
                });

                //验证错误
                uploader.on('error', function (file) {
                    validateMessage(file, true, "-上传出错");
                });

                $btn.on('click', function () {
                    if (state === 'uploading') {
                        uploader.stop();
                    } else {
                        uploader.upload();
                    }
                });
            });
        });
</script>