ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览

//plupload 集成
Ext.define('ux.plup.File', {
    extend: 'Ext.form.field.Text',
    xtype: 'plupFile',
    alias: ['widget.plupFile'],
    requires: ['Ext.form.trigger.Component', 'Ext.button.Button', 'Ext.window.Toast'],
    //plup对象
    uploader: null,
    //上传文件最大数量限制,最小只能设置为1
    maxFileCount: 1,
    //是否单文件上传,结合FileList使用时必须设置为false,否则不会有预览效果
    onlyOne: true,
    //上传地址,必须
    url: 'upload.php',
    //上传控件配置
    pluploadConfig: {
        //url 服务器端的上传页面地址,必须指定
        //swf文件，当需要使用swf方式进行上传时需要配置该参数,必须指定
        flash_swf_url: 'app/js/plupload/js/Moxie.swf',
        //用来指定上传方式，指定多个上传方式请使用逗号隔开。一般情况下，你不需要配置该参数，因为Plupload默认会根据你的其他的参数配置来选择最合适的上传方式。如果没有特殊要求的话，Plupload会首先选择html5上传方式，如果浏览器不支持html5，则会使用flash或silverlight，如果前面两者也都不支持，则会使用最传统的html4上传方式。如果你想指定使用某个上传方式，或改变上传方式的优先顺序，则你可以配置该参数。
        //html5,flash,silverlight,html4
        runtimes: 'html5,flash,html4',
        // 可以使用该参数来限制上传文件的类型，大小等，该参数以对象的形式传入，它包括三个属性： 
        filters: {
            //mime_types：用来限定上传文件的类型，为一个数组，该数组的每个元素又是一个对象，该对象有title和extensions两个属性，title为该过滤器的名称，extensions为文件扩展名，有多个时用逗号隔开。该属性默认为一个空数组，即不做限制。
            //max_file_size:用来限定上传文件的大小，如果文件体积超过了该值，则不能被选取。值可以为一个数字，单位为b,也可以是一个字符串，由数字和单位组成，如'200kb'
            //prevent_duplicates:是否允许选取重复的文件，为true时表示不允许，为false时表示允许，默认为false。如果两个文件的文件名和大小都相同，则会被认为是重复的文件
            prevent_duplicates: true
        }
        // multi_selection:是否可以在文件浏览对话框中选择多个文件，true为可以，false为不可以。默认true，即可以选择多个文件。需要注意的是，在某些不支持多选文件的环境中，默认值是false。比如在ios7的safari浏览器中，由于存在bug，造成不能多选文件。当然，在html4上传方式中，也是无法多选文件的。 
    },
    /**
     * @cfg {String} emptyText
     * Overridden to undefined as {@link #emptyText} is not supported with {@link #inputType inputType}:'file' and should be avoided.
     * The default text to place into an empty field.
     */
    emptyText: undefined,

    needArrowKeys: false,

    triggers: {
        //禁用时显示的按钮
        //因为上传按钮禁用效果无效，所以在禁用时显示另外一个按钮
        //这样就可以避免禁用按钮失效的bug
        disableButton: {
            type: 'component',
            hideOnReadOnly: false,
            hidden: true,
            // Most form fields prevent the default browser action on mousedown of the trigger.
            // This is intended to prevent the field's input element from losing focus when
            // the trigger is clicked.  File fields disable this behavior because:
            // 1. The input element does not receive focus when the field is focused. The button does.
            // 2. Preventing the default action of touchstart (translated from mousedown
            // on mobile browsers) prevents the browser's file dialog from opening.
            preventMouseDown: false
        },
        filebutton: {
            type: 'component',
            hideOnReadOnly: false,
            // Most form fields prevent the default browser action on mousedown of the trigger.
            // This is intended to prevent the field's input element from losing focus when
            // the trigger is clicked.  File fields disable this behavior because:
            // 1. The input element does not receive focus when the field is focused. The button does.
            // 2. Preventing the default action of touchstart (translated from mousedown
            // on mobile browsers) prevents the browser's file dialog from opening.
            preventMouseDown: false
        }
    },

    //<locale>
    /**
     * @cfg {String} buttonText
     * The button text to display on the upload button. Note that if you supply a value for
     * {@link #buttonConfig}, the buttonConfig.text value will be used instead if available.
     */
    buttonText: '选择文件',
    //</locale>
    /**
     * @cfg {Boolean} buttonOnly
     * True to display the file upload field as a button with no visible text field. If true, all
     * inherited Text members will still be available.
     */
    buttonOnly: false,

    /**
     * @cfg {Number} buttonMargin
     * The number of pixels of space reserved between the button and the text field. Note that this only
     * applies if {@link #buttonOnly} = false.
     */
    buttonMargin: 3,

    /**
     * @cfg {Boolean} clearOnSubmit
     * 提交后清除值
     */
    clearOnSubmit: true,

    /**
     * @private
     */
    extraFieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap',

    /**
     * @private
     */
    inputCls: Ext.baseCSSPrefix + 'form-text-file',

    /**
     * @cfg {Boolean} [readOnly=true]
     *只读，禁止修改
     */
    readOnly: true,

    /**
     * @cfg {Boolean} editable
     * @inheritdoc
     */
    editable: false,
    //form表单中不提交值
    submitValue: true,

    /**
     * Do not show hand pointer over text field since file choose dialog is only shown when clicking in the button
     * @private
     */
    triggerNoEditCls: '',

    /**
     * @private
     * Extract the file element, button outer element, and button active element.
     */
    childEls: ['browseButtonWrap'],

    /**
     * @private 创建上传按钮
     */
    applyTriggers: function (triggers) {
        var me = this,
        triggerCfg = (triggers || {}).filebutton,
        disableCfg = triggers.disableButton;
        //增加禁用按钮
        if (disableCfg) {
            disableCfg.component = Ext.apply({
                xtype: 'button',
                ownerCt: me,
                id: me.id + '-disableButton',
                ui: me.ui,
                disabled: true,
                text: me.buttonText
            })
        }
        //增加上传按钮
        if (triggerCfg) {
            triggerCfg.component = Ext.apply({
                xtype: 'button',
                ownerCt: me,
                id: me.id + '-button',
                ui: me.ui,
                disabled: me.disabled,
                text: me.buttonText,
                //设置margin-left
                style: me.buttonOnly ? '' : me.getButtonMarginProp() + me.buttonMargin + 'px',
                listeners: {
                    scope: me,
                    render: me.createPlup
                }
            },
            me.buttonConfig);

            return me.callParent([triggers]);
        }
            // <debug>
        else {
            Ext.raise(me.$className + ' requires a valid trigger config containing "button" specification');
        }
        // </debug>
    },

    /**
     * @private
     */
    onRender: function () {
        var me = this,
        inputEl, button, buttonEl, trigger;

        me.callParent(arguments);

        inputEl = me.inputEl;
        //它不应该有name
        inputEl.dom.name = '';

        //有些浏览器会显示在该领域的闪烁的光标，即使它是只读的。如果我们有这样的事情
        //获得焦点，就转发给我们focusEl。还注意到，在IE中，文件输入作为处理
        //2元素Tab键的目的（文本，然后按钮）。所以，当你通过TAB键，这将需要2
        //标签才能到下一个字段。据我知道有没有办法解决这个在任何一种合理的方式。
        inputEl.on('focus', me.onInputFocus, me);
        inputEl.on('mousedown', me.onInputMouseDown, me);
        //获取上传按钮
        trigger = me.getTrigger('filebutton');
        button = me.button = trigger.component;
        buttonEl = button.el;
        if (me.buttonOnly) {
            me.inputWrap.setDisplayed(false);
            me.shrinkWrap = 3;
        }

        // Ensure the trigger element is sized correctly upon render
        trigger.el.setWidth(buttonEl.getWidth() + buttonEl.getMargin('lr'));
        if (Ext.isIE) {
            me.button.getEl().repaint();
        }
    },
    /**
     * Gets the markup to be inserted into the subTplMarkup.
     */
    getTriggerMarkup: function () {
        console.log('getTriggerMarkup');
        return '<td id="' + this.id + '-browseButtonWrap" data-ref="browseButtonWrap" role="presentation"></td>';
    },
    onShow: function () {
        this.callParent();
        //如果我们开始了隐藏，按钮可能有一个搞砸布局
        //因为我们不像个容器
        this.button.updateLayout();
    },
    //创建上传控件
    createPlup: function (btn) {
        var me = this,
        //上传配置
        config = me.pluploadConfig,
        //name值
        name = me.getName(),
        //设置上传地址
        url = me.url,
        uploader;
        //获取当前按钮id
        config.browse_button = btn.getId();
        //指定文件上传时文件域的名称，默认为file,例如在php中你可以使用$_FILES['file']来获取上传的文件信息
        if (name) {
            config.file_data_name = name;
        }
        if (url) {
            config.url = url;
        }
        //上传文件最大数量限制为1时，选择文件只能选择一个
        if (me.maxFileCount === 1) {
            config.multi_selection = false;
        }

        //创建上传对象
        uploader = me.uploader = new plupload.Uploader(config);
        //初始化
        uploader.init();
        //监听错误文件被添加到上传队列时
        uploader.bind('FilesAdded',
        function (uploader, files) {
            me.filesAdded(uploader, files);
        });
        //监听错误
        //-602 重复文件
        uploader.bind('Error',
        function (uploader, file) {
            var code = file.code;
            if (code === -200) {
                //上传失败
                me.loadedFailure(uploader, {
                    message: file.message
                });
            } else {
                //抛出内部错误
                me.markInvalid(file.message);
            }
        });
        //上传完成
        uploader.bind('FileUploaded',
        function (loader, file, response) {
            response = Ext.decode(response.response);
            if (response.success) {
                //上传成功
                me.loadedSuccess(response);
            } else {
                //上传失败
                me.loadedFailure(loader, response);
            }
        });
        //会在文件上传过程中不断触发，可以用此事件来显示上传进度 
        uploader.bind('UploadProgress',
        function (loader, file) {
             Ext.Msg.updateProgress(loader.total.percent / 100, loader.total.percent + '%', '正在上传：' + file.name);
            //console.log(loader.total.percent);
            if (loader.total.percent == 100) {
                Ext.Msg.wait('上传成功，正在处理数据...','上传文件');
            } 
        });
    },
    //文件被添加到上传队列
    //uploader 上传对象
    //files 当前选中文件组
    filesAdded: function (uploader, files) {
        var me = this,
        //上传文件最大数量限制
        maxFileCount = me.maxFileCount,
        //现有文件（包括新选择的文件）
        oldFiles = uploader.files,
        //现有文件总数
        length = oldFiles.length,
        i, count;

        //上传文件最大数量限制为1,并且onlyOne为true时
        if (maxFileCount === 1 && me.onlyOne) {
            length = length - 2;
            //移除除最新文件之外所有文件
            for (i = length; i >= 0; i--) {
                uploader.removeFile(oldFiles[i]);
            }
            //设置文本框显示值
            me.setValue(oldFiles[0].name);
        } else {
            //文件数量超过或等于最大限制，禁用文件选择
            if (length >= maxFileCount) {
                count = length - maxFileCount;
                //从files中移除多于最大数量限制的文件，从最新选择的文件开始移除
                for (i = 0; i < count; i++) {
                    files.pop();
                }
                me.onDisable();
            }
            length = length - 1;
            maxFileCount = maxFileCount - 1;
            //移除多于最大数量限制的文件，从最新选择的文件开始移除
            for (i = length; i > maxFileCount; i--) {
                uploader.removeFile(oldFiles[i]);
            }
            //设置文本框显示值
            me.setValue(files[0].name);
            //抛出事件,供FileList使用
            me.fireEvent('addField', files);
        }
    },
    //移除文件
    removeFile: function (file) {
        var me = this,
        uploader = me.uploader,
        files;
        //移除文件
        uploader.removeFile(file);
        files = uploader.files;
        //取消禁用
        me.onEnable();
        //设置文本框的值
        if (uploader.files.length <= 0) {
            me.setValue(null);
        } else {
            me.setValue(files[0].name);
        }
    },
    submit: function (params) {
        var me = this,
        url = params.url,
        waitMsg = params.waitMsg || '正在上传',
        optionParams = params.params,
        uploader = me.uploader;
        //设置上传地址
        if (url) {
            uploader.setOption('url', url);
        }
        //设置参数
        if (optionParams) {
            uploader.setOption('multipart_params', optionParams);
        }
        //上传成功执行方法
        me.success = params.success || Ext.emptyFn;
        //上传失败执行方法
        me.failure = params.failure || Ext.emptyFn;
        uploader.start();
        Ext.Msg.progress('上传文件', waitMsg);
    },
    //上传成功
    loadedSuccess: function (response) {
        Ext.MessageBox.hide();
        this.reset();
        //抛出事件
        this.fireEvent('loadedSuccess', this);
        //执行成功函数
        this.success(response);
    },
    //上传失败
    loadedFailure: function (loader, response) {
        //停止上传
        loader.stop();
        //隐藏进度条
        Ext.MessageBox.hide();
        //重置
        this.reset();
        //抛出事件
        this.fireEvent('loadedFailure', this);
        //执行失败函数
        this.failure(response);
    },
    //上传成功执行,submit方法回调
    success: Ext.emptyFn,
    //上传失败执行,submit方法回调
    failure: Ext.emptyFn,
    //重置上传控件
    reset: function () {
        var uploader = this.uploader,
        files = uploader.files,
        //现有文件总数
        length = files.length - 1,
        i;
        //移除所有文件
        for (i = length; i > -1; i--) {
            uploader.removeFile(files[i]);
        }
        this.onEnable();
        this.callParent();
    },
    //禁用控件tab键切换功能
    getSubTplData: function (fieldData) {
        var data = this.callParent([fieldData]);
        //因为它是上传控件不应该获取焦点;
        //然而input元素自然是可聚焦，所以我们必须
        //由它的tabIndex设置为-1停用。
        data.tabIdx = -1;

        return data;
    },
    //禁用
    onDisable: function () {
        this.callParent();
        this.setFileEnable(true);
    },
    //取消禁用
    onEnable: function () {
        this.callParent();
        this.setFileEnable(false);
    },
    //更改禁用状态
    setFileEnable: function (is) {
        var me = this;
        //设置上传控件是否禁用
        //某些情况下设置会失效，原因不明
        me.uploader.disableBrowse(is);
        //当上传按钮隐藏时显示一个假按钮
        //上传按启用时隐藏加按钮
        //这个解决方案是为了避免上面说的禁用失效问题
        me.getTrigger('disableButton').setHidden(!is);
        me.getTrigger('filebutton').setHidden(is);
        //重绘布局
        me.updateLayout();
    },
    //销毁
    onDestroy: function () {
        this.uploader.destroy();
        this.callParent();
    },
    restoreInput: function (el) {
        //如果我们不渲染，我们不需要做任何事情，它会创建
        //当我们刷新到DOM。
        if (this.rendered) {
            var button = this.button;
            button.restoreInput(el);
            this.fileInputEl = button.fileInputEl;
        }
    },
    getButtonMarginProp: function () {
        return 'margin-left:';
    },
    //输入框获得焦点
    onInputFocus: function () {
        this.focus();
        //从只读输入元素切换焦点文件输入
        //结果在文件输入的不正确的定位。
        //添加和删除位置：相对有助于解决这个问题。
        //见https://sencha.jira.com/browse/EXTJS-18933
        if (Ext.isIE9m) {
            this.fileInputEl.addCls(Ext.baseCSSPrefix + 'position-relative');
            this.fileInputEl.removeCls(Ext.baseCSSPrefix + 'position-relative');
        }
    },
    //点击输入框
    onInputMouseDown: function (e) {
        //console.log('onInputMouseDown');
        //有些浏览器将显示即使输入是只读的光标，
        //这将在inputEl之间聚焦随后的聚焦跳跃的短瞬间
        //和文件按钮是可见的。 
        //从闪烁的重点消除防止inputEl。
        e.preventDefault();

        this.focus();
    },
    privates: {
        getFocusEl: function () {
            return this.button;
        },

        getFocusClsEl: Ext.privateFn
    }
});

用法等同form.submit()方法，获取控件后plupFile.submit()即可提交，可能有坑

//自定义批量上传预览控件
//isUpload为true时每选择一个文件都会触发onAddField事件，需要自行处理上传，多用于修改场景
//isUpload为false时每选择一个文件都会在本地自增file控件，最后在表单中手动批量提交
Ext.define('ux.plup.FileList', {
    extend: 'Ext.container.Container',
    alias: ['widget.plupFileList'],
    requires: ['Ext.DataView', 'ux.plup.File'],
    //样式
    cls: 'uxFileList',
    config: {
        //数据
        data: null,
        //预览视图
        dataview: {
            itemTpl: new Ext.XTemplate('<div class="thumb-wrap bb" style="background-image:url({img});">', '<button type="button" class="x-fa fa-trash"></button>', '</div>', '<p>{name}</p>')
        },
        //上传控件配置
        uploaderField: {
            onlyOne: false,
            buttonOnly: true,
            //提交后清除
            clearOnSubmit: false,
            fieldLabel: '上传文件',
            msgTarget: 'under'
        },
        //uploader配置
        pluploadConfig:null
    },
    //是否立即上传
    isUpload: false,
    //是否只能查看
    isSee: false,
    //当前文件总数
    fieldCount:0,
    //上传文件数量限制,默认一个
    maxFileCount: 1,
    //默认预览图片路径，上传文件非图片时使用
    preview: {
        //文件
        file: 'classic/resources/images/file.png',
        //视频
        video: 'classic/resources/images/video.jpg'
    },
    //初始化
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        //新增上传控件、图片列表
        me.add([me.getUploaderField(), me.getDataview()]);
    },
    //设置isSee
    setIsSee: function (isSee) {
        this.isSee = isSee;
    },
    //设置isUpload
    setIsUpload: function (isUpload) {
        this.isUpload = isUpload;
    },
    /*创建上传控件*/
    applyUploaderField: function (config) {
        config.maxFileCount = this.maxFileCount;
        return Ext.factory(config, ux.plup.File, this.getUploaderField());
    },
    /*更新上传控件*/
    updateUploaderField: function (newItem) {
        if (newItem) {
            //监听上传控件
            newItem.on({
                scope: this,
                addField: 'onAddField',
                loadedFailure: 'removeAll'
            });
        }
    },
    //更新上传控件配置
    updatePluploadConfig: function (option) {
        if (option) {
            var uploaderField = this.getUploaderField(),
                uploader = uploaderField.uploader;
            uploader.setOption(option);
            uploaderField.reset();
            this.removeAll();
        }
    },
    //选择文件完成
    onAddField: function (files) {
        var me = this,
           length = files.length,
           i;
        if (me.isUpload) {
            //抛出事件
            me.fireEvent('onAddField', me, files);
        } else {
            //添加预览图片
            for (i = 0; i < length; i++) {
                me.previewImage(files[i], function (file, src) {
                    me.addData({
                        //预览图片
                        img: src,
                        //文件名称
                        name: file.name,
                        file: file
                    });
                })
            }
        }
    },
    //获取上传文件预览图
    //plupload中为我们提供了mOxie对象
    //有关mOxie的介绍和说明请看：https://github.com/moxiecode/moxie/wiki/API
    previewImage: function (file, callback) {
        //如果不是图片,返回默认预览图
        if (!file || !/image//.test(file.type)) {
            var url = this.preview.file;
            //如果是视频格式
            if (/video//.test(file.type)) {
                url = this.preview.video;
            } 
            callback && callback(file, url);
        };
        //确保文件是图片
        if (file.type === 'image/gif') {
            //gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
            var fr = new mOxie.FileReader();
            fr.onload = function () {
                callback && callback(file, fr.result);
                fr.destroy();
                fr = null;
            }
            fr.readAsDataURL(file.getSource());
        } else {
            var preloader = new mOxie.Image();
            preloader.onload = function () {
                ////先压缩一下要预览的图片,宽300，高300
                //preloader.downsize(300, 300);
                var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
                callback && callback(file, imgsrc); //callback传入的参数为预览图片的url
                preloader.destroy();
                preloader = null;
            };
            preloader.load(file.getSource());
        }
    },
    /*创建图片列表*/
    applyDataview: function (config) {
        return Ext.factory(config, Ext.DataView, this.getDataview());
    },
    /* 更新图片列表*/
    updateDataview: function (newItem) {
        if (newItem) {
            //监听预览列表
            newItem.on({
                itemclick: 'itemclick',
                itemdblclick: 'itemdblclick',
                scope: this
            });
        }
    },
    //单击删除
    itemclick: function (t, record, item, index, e) {
        var me = this,
        store = t.getStore();
        //点击删除按钮才执行
        if (!me.isSee && e.target.tagName === 'BUTTON') {
            Ext.MessageBox.confirm('删除确认', '确认删除?',
            function (btnText) {
                if (btnText === 'yes') {
                    me.removeFile(me, store, record);
                }
            }, me);
        }
    },
    //双击触发事件
    itemdblclick: function (t, record, item, index, e) {
        var me = this;
        if (e.target.tagName !== 'BUTTON') {
            me.fireEvent('onItemDbClick', me, record);
        }
    },
    //新增图片
    addData: function (data) {
        var me = this,
        store = me.getStore(), //获取最大限制
        maxFileCount = me.maxFileCount;
        if (store && store.storeId !== 'ext-empty-store') {
            //已有数据，新增
            store.add(data);
            if (!data.file) {
                //检测数目
                me.fieldCount = me.fieldCount || 0;
                //总数加1
                me.fieldCount++;
                //如果达到最大限制禁用
                if (me.fieldCount >= maxFileCount) {
                    me.onDisable();
                }
                me.setValue(data.name);
            }
        } else {
            //没有数据，创建
            me.setData([data]);
        }
    },
    /*创建data*/
    applyData: function (data) {
        return data;
    },
    /*更新data*/
    updateData: function (data) {
        if (data && data.length > 0) {
            //有数据则创建store
            var me = this,
            dataview = me.getDataview(),
            //获取最大限制
            maxFileCount = me.maxFileCount;
            dataview.setStore(Ext.create('Ext.data.Store', {
                data: data,
                autoDestroy: true
            }));
            me.fieldCount = data.length;
            //如果达到最大限制禁用
            if (me.fieldCount >= maxFileCount) {
                me.onDisable();
            }
            me.setValue(data[0].name);
        }
    },
    //获取所有数据
    getStore: function () {
        return this.getDataview().getStore();
    },
    //清除所有数据
    removeAll: function () {
        var store = this.getStore();
        if (store) {
            store.removeAll();
        }
    },
    //移除单个文件
    removeFile: function (me, store, record) {
        var file = record.get('file'),
            uploaderField = this.getUploaderField();
        if (file) {
            uploaderField.removeFile(record.get('file'));
        } else {
            me.onEnable();
        }
        me.fieldCount--;
        store.remove(record);
        if (me.fieldCount<=0) {
            uploaderField.setValue(null);
        } else {
            uploaderField.setValue(store.getAt(0).get('name'));
        }
    },
    //上传附件
    submit: function (params) {
        this.getUploaderField().submit(params);
    },
    //禁用
    onDisable: function () {
        var file = this.getUploaderField();
        file.onDisable();
    },
    //取消禁用
    onEnable: function () {
        this.getUploaderField().onEnable();
    },
    //设置文本框的值
    setValue: function (value) {
        this.getUploaderField().setValue(value);
    }

});