浏览 13718 次
|
锁定老帖子 主题：extJs之简易上传控件
精华帖 (0) :: 良好帖 (0) :: 新手帖 (2) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-07-21
ext的官方网站有许多大侠写了许多狠牛的上传控件，但是功能太炫，我感觉反而不适用！效果如下 //*****************************************上传的公共js***************************************************************//
/**
* 约定:types为调用时传来的参数.形式为jsp-gig-png
* uploadid为上传后要填充路径的控件id
* 上传的属性均为upload
* 功能:页面调用openUpload("","");方法即可
*/
//...允许上传的后缀名
var types = "";
//...上传后填充控件的id
var uploadid = "";
function openUpload(type,id){
types = type;
uploadid = id;
winUpload.show();
}
var formUpload = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 80,
fileUpload:true,
defaultType: 'textfield',
items: [{
xtype: 'textfield',
fieldLabel: '文 件',
name: 'upload',
inputType: 'file',
allowBlank: false,
blankText: '请上传文件',
anchor: '90%' // anchor width by percentage
}]
});
var winUpload = new Ext.Window({
title: '资源上传',
width: 400,
height:200,
minWidth: 300,
minHeight: 100,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: formUpload,
buttons: [{
text: '上 传',
handler: function() {
if(formUpload.form.isValid()){
Ext.MessageBox.show({
title: 'Please wait',
msg: 'Uploading...',
progressText: '',
width:300,
progress:true,
closable:false,
animEl: 'loding'
});
formUpload.getForm().submit({
url:'uploadAction.action?types='+types,
success: function(form, action){
var objxzdz = Ext.get(uploadid).dom;
var value = action.result.msg;
objxzdz.value = value;
Ext.Msg.alert('成功','上传成功.');
winUpload.hide();
},
failure: function(form, action){
//... action生成的json{msg:上传失败},页面就可以用action.result.msg得到非常之灵活
Ext.Msg.alert('Error', action.result.msg);
}
})
}
}
},{
text: '取 消',
handler:function(){winUpload.hide();}
}]
});
//*****************************************上传的公共js***************************************************************//
现在已经封装完毕了，我们看看在页面上如何调用
openUpload("txt-xls-doc-docs-pds","xzdzid");
就这一句话，嘿嘿，简单吧？第一个参数为允许上传的类型，第二个参数为上传后地址要绑定到哪个控件（是该控件的id）
action的代码还是贴下吧
关键是 url:'uploadAction.action?types='+types,这里会指定后台的请求地址 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-07-22
不错，有点问题想问问
客户端的文件上传类型设了有什么用？ |
| 返回顶楼 | |
|
发表时间：2008-07-23
只是做个验证
如果上传图片你传个txt文件的话struts2会返回一个json提示你类型不匹配 其实这点不是狠好,还是经过了服务器,希望大家可以提意见改进 还有,我博客都是从csdn搬过来的,可能有些地方有问题,大家都提出来 |
| 返回顶楼 | |
|
发表时间：2008-09-13
请教下，上传完后的那个图片存放的地址是如何放到前台的输入框里边的，呵呵，不知道有没有完整的例子参考下，谢谢了。
|
| 返回顶楼 | |
|
发表时间：2008-09-15
为什么我按照楼主的做了但是前台总是提示：action.result is undefined
这个是什么原因呢？ |
| 返回顶楼 | |
|
发表时间：2008-09-17
应该不会的
wwwtd好好检查一下 还有什么问题的话把邮箱发给我 我传个例子你 |
| 返回顶楼 | |
上传完了之后地址会加载到上传内容这个文本框里面 
里面还做了类型判断，用于上传文本和相片代码如下，把一下代码封装在一个js文件里面 