extjs4中怎么上传多个文件上传

extjs4中怎么上传多个文件上传,第1张

用swfupload吧,这个可以实现,不知道jquery.uploadify可不可以集成到Extjs里,总之swfupload绝对可以,曾经实现过,不过lz应该要研究不少时间,单纯的input type='file'就不用想了

下面为大家介绍在ExtJs中上传文件的几种方法

第一种方法:传统的上传方式

在formpanal中增加一个fileUpload的属性

例子代码:

JScript 代码 复制

Ext.onReady(function(){

var form = new Ext.form.FormPanel({

renderTo:'file',

labelAlign: 'right',

title: '文件上传',

labelWidth: 60,

frame:true,

url: 服务器处理上传功能的url地址,//fileUploadServlet

width: 300,

height:200,

fileUpload: true,

items: [{

xtype: 'textfield',

fieldLabel: '文件名',

name: 'file',

inputType: 'file'//文件类型

}],

buttons: [{

text: '上传',

handler: function() {

form.getForm().submit({

success: function(form, response){

Ext.Msg.alert('信息', response.result.msg)

},

failure: function(){

Ext.Msg.alert('错误', '文件上传失败')

}

})

}

}]

})

})

第二种方法:借助Ext.ux.UploadDialog.Dialog的组件,在编码时需要导入两个文件

需要引入 Ext.ux.UploadDialog 样式文件 和 Ext.ux.UploadDialog.packed脚本文件。

例子代码

//在使用此方法进行文件上传时,其后台往页面的返回值类型是这样的:

//{'success':true,'message':'上传成功'}

//如果没有success:true,无论上传成功与否,显示的都是上传失败,其实这个和form.submit()的提交方式是一个道理。

var dialog = new Ext.ux.UploadDialog.Dialog({

autoCreate: true,

closable: true,

collapsible: false,

draggable: true,

minWidth: 400,

minHeight: 200,

width: 400,

height: 350,

permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','xls','XLS'],

proxyDrag: true,

resizable: true,

constraintoviewport: true,

title: '文件上传',

url:用于处理上传文件功能的Url,

reset_on_hide: false,

allow_close_on_upload: true ,

upload_autostart: false

})

//定义上传文件的按钮

var btnShow = new Ext.Button({

text:'上传文件',

listeners:{

click:function(btnThis,eventobj){

dialog.show()

}

}

})

你只写了界面没有写业务 官方有这样的代码

Ext.create('Ext.form.Panel', {

title: 'Upload a Photo',

width: 400,

bodyPadding: 10,

frame: true,

renderTo: Ext.getBody(),

items: [{

xtype: 'filefield',

name: 'photo',

fieldLabel: 'Photo',

labelWidth: 50,

msgTarget: 'side',

allowBlank: false,

anchor: '100%',

buttonText: 'Select Photo...'

}],

buttons: [{

text: 'Upload',

handler: function() {

var form = this.up('form').getForm()

if(form.isValid()){

form.submit({

url: 'photo-upload.php',

waitMsg: 'Uploading your photo...',

success: function(fp, o) {

Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.')

}

})

}

}

}]

})


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/8042932.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-12
下一篇 2023-04-12

发表评论

登录后才能评论

评论列表(0条)

保存