Ext plupload封装使用
戚俊健
/****************************************************************
* 文件名: PluploadModule.js
* 作者: leos
* 文件创建时间: 2019.12.25
* 文件描述: class PluploadModule 上传模块
*******************************************************。********/
Ext.define('XXXX.XXXX.Plupload.PluploadModule', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.pluploadmodule',
requires: [
'Ext.ux.statusbar.StatusBar',
'Ext.ux.statusbar.ValidationStatus'
],
constructor: function(config)
{
var me = this;
Ext.apply(me, config);
me.callParent(arguments);
},
id: 'plupload-win',
view:null,
init: function (cmp) {
var me = this,
uploader = cmp.uploader;
cmp.on({
filesadded: {
fn: function (uploader, files) {
me.createWindow(uploader).show();
},
scope: me
},
updateprogress: {
fn: function (uploader, total, percent, sent, success, failed, queued, speed) {
var t = Ext.String.format('Upload {0}% ({1} von {2})', percent, sent, total);
me.statusbar.showBusy({
text: t,
clear: false
});
},
scope: me
},
uploadprogress: {
fn: function (uploader, file, name, size, percent) {
// me.statusbar.setText(name + ' ' + percent + '%');
},
scope: me
},
uploadcomplete: {
fn: function (uploader, success, failed) {
if (failed.length == 0)
me.window.hide();
},
scope: me
}
});
me.statusbar = new Ext.ux.StatusBar({
dock: 'bottom',
//id: 'form-statusbar',
defaultText: 'Ready'
});
me.view = new Ext.grid.Panel({
store: uploader.store,
stateful: true,
multiSelect: true,
//hideHeaders: true,
stateId: 'stateGrid',
columns: [
{
text: '文件名称',
flex: 1,
sortable: false,
dataIndex: 'name'
},
{
text: '文件大小',
flex: 1,
sortable: true,
align: 'right',
renderer: Ext.util.Format.fileSize,
dataIndex: 'size'
},
{
text: 'Change',
width: 75,
sortable: true,
hidden: true,
dataIndex: 'percent'
},
{
text: 'status',
width: 75,
hidden: true,
sortable: true,
dataIndex: 'status'
},
{
text: '消息',
flex: 1,
sortable: true,
dataIndex: 'msg'
}],
viewConfig: {
stripeRows: true,
enableTextSelection: false
},
dockedItems: [{
dock: 'top',
enableOverflow: true,
xtype: 'toolbar',
style: {
background: 'transparent',
border: 'none',
padding: '5px 0'
},
listeners: {
beforerender: function (toolbar) {
if (uploader.autoStart == false)
toolbar.add(uploader.actions.start);
toolbar.add(uploader.actions.cancel);
toolbar.add(uploader.actions.removeAll);
if (uploader.autoRemoveUploaded == false)
toolbar.add(uploader.actions.removeUploaded);
},
scope: me
}
},
me.statusbar]
});
},
// begin createWindw
createWindow: function (store) {
var me = this;
console.log(me.view)
win = new Ext.Window({
title: '上传进度',
width: document.body.clientWidth * 0.9,
height: document.body.clientHeight * 0.8,
modal: true, // harry
constrain: true,
border: false,
layout: 'fit',
items: me.view,
closeAction: 'hide',
listeners: {
hide: function (window) {
},
scope: this
}
});
return win
}
});
包含进度，速度，大小上传窗口
紧接着再去封装一个xtype组件 启用别名cutomuploadbutton
/****************************************************************
* 文件名: Plupload.js
* 作者: leos
* 文件创建时间: 2019.11.20
* 文件描述: 扩展Ext的上传组件类，
***************************************************************/
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux': 'http://extjs.cachefly.net/extjs-4.1.1-gpl/examples/ux/',
'Ext.ux.upload': '../../ext4/upload/ux/upload'
}
});
Ext.define("XXXX.XXXX.Plupload.Plupload", {
extend: 'Ext.ux.upload.Button',
requires: [
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.ux.upload.Button',
//'Ext.ux.upload.plugin.Window',
'XXXX.XXXX.Plupload.PluploadModule'
],
alias: ['widget.cutomuploadbutton'],
text: '上传',
SelectedObjectId: 0,
plugins: [{
ptype: 'pluploadmodule',
pluginId: 'pid',
}],
listeners: {
filesadded: function(uploader, files) {
return true;
},
beforeupload: function(uploader, file) {},
fileuploaded: function(uploader, file) {},
uploadcomplete: function(uploader, success, failed) {},
scope: this
}
});紧接着大体都已经封装完成
使用方法
{
xtype: 'cutomuploadbutton',
//id: 'ObjectPhotosUploadBtn',
uploader: {
url:xxxxx,//服务器端接收和处理上传文件的脚本地址，可以是相对路径(相对于当前调用Plupload的文档)，也可以是绝对路径
multipart_params: {//上传时的附加参数，以键/值对的形式传入，服务器端可是使用$_POST来获取这些参数。比如
xxx: 'xxx',
xxx: 'xxx',
},
//uploadpath: '/Root/files',
autoStart: true,//自动上传
max_file_size: '99999mb',//配置了请求大小,前端配置已成功，应该是大于了后端上传限制
//drop_element: 'dragload',拖拽上传
statusQueuedText: '准备上传',
statusUploadingText: '正在上传{0}%',
statusFailedText: '<span style="color: red">Error</span>',
statusDoneText: '<span style="color: green">Complete</span>',
statusInvalidSizeText: '文件太大',
statusInvalidExtensionText: '无效的文件类型'
},
listeners: {
"click": function (btn,e) {
var uploader = btn.uploader.uploader;
var me = this;
var getPath = "";
if (me.getSelectionModel().getSelection().length > 0) {
getPath = me.getSelectionModel().getSelection()[0].data.path;
} else {
getPath = me.currentPath;
}
if (getPath != "/opt/resources") { //校验通过
uploader.disableBrowse(false);
} else {
uploader.disableBrowse(true);
}
},
filesadded: function (uploader, files) {
var getPath = "";
if (me.getSelectionModel().getSelection().length > 0) {
getPath = me.getSelectionModel().getSelection()[0].data.path;
} else {
getPath = me.currentPath;
}
uploader.multipart_params.remotePath = getPath//在上传前传入参数路径
return true;
},
scope: this
}
}
类似资料：