当前位置: 首页 > 工具软件 > DropzoneJS > 使用案例 >

Extjs4 封装dropzonejs组件 2016.12.29

董康平
2023-12-01
Ext.define('Ext.ux.Dropupload', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.dropupload',
    alternateClassName: 'Ext.panel.Dropupload',
    option: null,//参数(url是必填值)
    dropz: null,//拖拽组件
    initComponent : function(){
        var me = this;
        me.addEvents('resize');
        me.callParent(arguments);
        me.on({
            resize: me.onResize,
            scope: me
        });
    },
    finishRenderChildren: function () {
        this.callParent();
    },
    onRender: function() {
        var me = this;
        me.inputEl = document.createElement('div');
        me.inputEl.className = 'dropzone';
        me.InnerId=Ext.id();
        me.inputEl.id=me.InnerId;
        document.body.appendChild(me.inputEl);
        if (me.option) {
            me.dropz = new Dropzone("div#"+me.InnerId, me.option);
            me.dropz.on("complete", me.onComplete);
        }
        me.inputEl.style.height="100%";
        me.inputEl.style.width="100%";
        me.contentEl=me.InnerId;
        me.callParent(arguments);
    },
    onDestroy: function(){
        var me = this;
        if(me.rendered){
            try {
                Ext.EventManager.removeAll(me.dropz);
                for (prop in me.dropz) {
                    if (me.dropz.hasOwnProperty(prop)) {
                        delete me.dropz[prop];
                    }
                }
            }catch(e){}
        }
        me.callParent();
    },
    onComplete: function(file){
        //需自定义
    }
});
//使用
Ext.create('Ext.ux.Dropupload', {
	autoScroll: true,
	option: {
		url: '',
		paramName: 'Attached',
    maxFiles: 10,
    maxFilesize: 512,
    acceptedFiles: ".bmp,.jpg,.png,.gif,.pdf",
    thumbnailWidth: 800,
  	thumbnailHeight: 600,
    dictDefaultMessage: "将确认件拖至此处或点击上传"
	},
  //完成上传
  onComplete: function(data) {
    if(data){
      //返回参数
      var res = JSON.parse(data.xhr.responseText);
      Ext.Ajax.request({  
        url:'',
        method:'post',
        params:{
        },
        success: function(re, opts) {
        },  
        failure: function(re){
          console.log(re.responseText);
        }
      });
    }
  }
});
 类似资料: