extjs6 整合webuploader

先做一个上传界面：


@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/Content/css/wu.css" />
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="~/Scripts/webuploader/webuploader.css">
    <script type="text/javascript" src="~/Scripts/webuploader/webuploader.js"></script>

    <style>
        .wu-example {
            position: relative;
            padding: 15px;
            margin: 15px 0;
            /*background-color: #fafafa;*/
            /*box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);*/
            /*border-color: #e5e5e5 #eee #eee;*/
            /*border-style: solid;*/
            /*border-width: 1px 0;*/
        }

        #picker {
            display: inline-block;
            line-height: 1.428571429;
            vertical-align: middle;
            margin: 0 12px 0 0;
        }

            #picker .webuploader-pick {
                padding: 6px 12px;
                display: block;
            }
    </style>

    <script>
        var upType;
        var upFileUrl;
        $(document).ready(function () {
            window.parent.setUploadIframeId(window.frameElement.id);

            var GUID = WebUploader.Base.guid();
            var uploader = WebUploader.create({
                // swf文件路径
                swf: '/scripts/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: '/frame/UpFile',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker',
                //禁用拖拽上传
                disableGlobalDnd: true,
                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
                //分片
                chunked: true,
                //每片大小 2M
                chunkSize: 2097152,
                //单片失败后重试次数
                chunkRetry: 5,
                //上传并发线程数
                threads: 1,
                //可上传文件数量
                fileNumLimit: 1,
                //图片上传之前不压缩
                compress: false,
                formData: { guid: GUID, upType: upType }
            });

            // 当有文件被添加进队列的时候
            uploader.on('fileQueued', function (file) {
                $('#thelist').append('<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                '</div>');
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active">' +
                                 '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                                 '</div>' +
                                 '</div>').appendTo($li).find('.progress-bar');
                }
                $li.find('p.state').text('上传中');
                $percent.css('width', percentage * 100 + '%');
            });

            uploader.on('uploadSuccess', function (file, response) {
                if (response.success) {
                    upFileUrl = response.data;
                    $('#' + file.id).find('p.state').html('已上传:<a href=/frame/getfile?url=' + upFileUrl + ' target=_blank>' + upFileUrl + '</a>');
                }
            });

            uploader.on('uploadError', function (file) {
                $('#' + file.id).find('p.state').text('上传出错');
            });

            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').fadeOut();
            });


            $('#ctlBtn').on('click', function () {
                uploader.upload();
            });

            $('#btnReset').on('click', function () {
                uploader.reset();
                $('#thelist').html('');
            });
        })

        function setUpType(type) {
            upType = type;
        }

        function getUpfile() {
            return upFileUrl;
        }
    </script>
</head>
<body>

    <div id="uploader" class="wu-example">
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">选择文件</div>
            <button id="ctlBtn" class="btn btn-default btn-sm">开始上传</button>
        </div>

    </div>

</body>
</html>

需要上传功能的表单：

 var showUp = function (record) {
        var form = Ext.create('Ext.form.Panel', {
            url: '',
            layout: 'anchor',
            autoScroll: true,
            fieldDefaults: {
                labelWidth: 60,
                flex: 1,
                margin: 5
            },
            items: [{
                name: 'ID',
                xtype: 'hidden'
            }, {
                name: 'Url',
                xtype: 'hidden'
            }, {
                name: 'Name',
                xtype: 'displayfield',
                fieldLabel: '子系统'
            }, {
                name: 'Ver',
                xtype: 'textfield',
                fieldLabel: '版本',
                allowBlank: false
            }, {
                xtype: 'container',
                layout: 'hbox',
                items: [
                {
                    name: 'updiv',
                    xtype: 'displayfield',
                    fieldLabel: '文件',
                    value: '',
                    flex: 1
                }, {
                    xtype: 'button',
                    text: '选择文件',
                    margin:'0 10 0 0',
                    handler: function () {
                        var iframeid = 'iframe_upload';
                        var content = '<iframe scrolling="auto" frameborder="0" id="'+iframeid+'"  src="/frame/uploadFile" style="width:100%;height:100%;"></iframe>';
                        var win_up = Ext.create('Ext.window.Window', {
                            title: '选择文件并上传',
                            width: 350,
                            height: 250,
                            modal: true,
                            layout: 'fit',
                            items: [{
                                xtype: 'panel',
                                html:content
                            }],
                            buttons: [{
                                text: '确定',
                                handler: function () {
                                    var url = $('#' + iframeid)[0].contentWindow.getUpfile();
                                    form.getForm().findField('updiv').setValue('<a href=/frame/getfile?url=' + url + ' target=_blank>' + url + '</a>');
                                    form.getForm().findField('Url').setValue(url);
                                    win_up.close();
                                }
                            }]
                        }).show();
                    }
                }]
            }],
            buttons: [{
                text: '重置',
                handler: function () {
                    form.reset();
                }
            }, {
                text: '提交',
                formBind: true,
                disabled:true,
                handler: function () {

                }
            }]
        });

        var win = Ext.create('Ext.window.Window', {
            title: '上传文件',
            modal: true,
            width: 400,
            height: 200,
            closable: true,
            layout: 'fit',
            items: [form]
        }).show();

        form.getForm().findField('ID').setValue(record.data.ID);
        form.getForm().findField('Name').setValue(record.data.Name);
        form.getForm().findField('updiv').setValue('未选择');

    }

表单界面还需要有个方法：

//向上传窗口传递参数
function setUploadIframeId(iframeId) {
    $('#' + iframeId)[0].contentWindow.setUpType('app');
}

表单界面也需要应用jquery

extjs6 整合webuploader

猜你喜欢