ext上传文件代码


Js代码
var gameFrom = new Ext.form.FormPanel({
width:300,
height:400,
fileUpload:true,
frame:true,
bodyStyle: 'padding:5px 5px 0',
labelAlign:'center',
items:[
new Ext.form.TextField({fieldLabel:'游戏截图1',name:'picture1',inputType:'file',allowBlank:false}),
new Ext.form.TextField({fieldLabel:'游戏截图2',name:'picture2',inputType:'file'}),
new Ext.form.TextField({fieldLabel:'游戏截图3',name:'picture3',inputType:'file'})
//这里的名字picture1,picture2,picture3和form里面的对应,使用jsp的时候名字和form对应也能传上去
//相信生成的JS代码也是像<input type="file" name="picture1"/>这样的吧
//fileUpload:true == enctype="multipart/form-data" 这句吧
],
buttons:[
{text:'添加',handler:function(){
if(game_form.form.isValid()){
game_form.form.submit({
method:'POST',
url:'../admin/addGame.do',
waitMsg:'游戏添加中...',
success:function(){Ext.MessageBox.alert('添加信息','添加成功');},
failure:function(){Ext.MessageBox.alert('添加信息','添加失败');}

});
}else{
Ext.MessageBox.alert('提示', '请完整填写表单');
return;
}
add_dlg.hide();

}},
{text:'取消',handler:function(){
add_dlg.hide();
}
}
]
});

var addGame_dlg = new Ext.Window({
title:'添加游戏截图',
layout:'fit',
height:540,
width:650,
autoDestroy : true,
closeAction:'hide',
modal:true,
items:[gameFrom]
});

var gameFrom = new Ext.form.FormPanel({
width:300,
height:400,
fileUpload:true,
frame:true,
bodyStyle: 'padding:5px 5px 0',
labelAlign:'center',
items:[
new Ext.form.TextField({fieldLabel:'游戏截图1',name:'picture1',inputType:'file',allowBlank:false}),
new Ext.form.TextField({fieldLabel:'游戏截图2',name:'picture2',inputType:'file'}),
new Ext.form.TextField({fieldLabel:'游戏截图3',name:'picture3',inputType:'file'})
//这里的名字picture1,picture2,picture3和form里面的对应,使用jsp的时候名字和form对应也能传上去
//相信生成的JS代码也是像<input type="file" name="picture1"/>这样的吧
//fileUpload:true == enctype="multipart/form-data" 这句吧
],
buttons:[
{text:'添加',handler:function(){
if(game_form.form.isValid()){
game_form.form.submit({
method:'POST',
url:'../admin/addGame.do',
waitMsg:'游戏添加中...',
success:function(){Ext.MessageBox.alert('添加信息','添加成功');},
failure:function(){Ext.MessageBox.alert('添加信息','添加失败');}

});
}else{
Ext.MessageBox.alert('提示', '请完整填写表单');
return;
}
add_dlg.hide();

}},
{text:'取消',handler:function(){
add_dlg.hide();
}
}
]
});

var addGame_dlg = new Ext.Window({
title:'添加游戏截图',
layout:'fit',
height:540,
width:650,
autoDestroy : true,
closeAction:'hide',
modal:true,
items:[gameFrom]
});

form代码
Java代码
private FormFile picture1;

private FormFile picture2;

private FormFile picture3;
省略了get和set方法......

private FormFile picture1;

private FormFile picture2;

private FormFile picture3;
省略了get和set方法......

action代码AddGameAction.java
Java代码
try {
FormFile picture1 = gameInfoForm.getPicture1();
gameInfo.setPictureMain(org.hibernate.Hibernate.createBlob(picture1
.getInputStream()));

FormFile picture2 = gameInfoForm.getPicture2();
gameInfo.setPicture1(org.hibernate.Hibernate.createBlob(picture2
.getInputStream()));

FormFile picture3 = gameInfoForm.getPicture3();
gameInfo.setPicture2(org.hibernate.Hibernate.createBlob(picture3
.getInputStream()));
} catch (Exception e) {
e.printStackTrace();
}
下面就是调用save等方法,保存当前的数据

将文件直接存入数据库中了.......

try {
FormFile picture1 = gameInfoForm.getPicture1();
gameInfo.setPictureMain(org.hibernate.Hibernate.createBlob(picture1
.getInputStream()));

FormFile picture2 = gameInfoForm.getPicture2();
gameInfo.setPicture1(org.hibernate.Hibernate.createBlob(picture2
.getInputStream()));

FormFile picture3 = gameInfoForm.getPicture3();
gameInfo.setPicture2(org.hibernate.Hibernate.createBlob(picture3
.getInputStream()));
} catch (Exception e) {
e.printStackTrace();
}
下面就是调用save等方法,保存当前的数据

将文件直接存入数据库中了.......

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在EXT.js中实现上文件功能,可以使用Ext.form.Panel和Ext.form.field.File组件。具体步骤如下: 1. 创建一个Ext.form.Panel组件,设置属性和方法。 ```javascript var formPanel = Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), width: 400, height: 150, title: '上文件', bodyPadding: 10, frame: true, url: 'upload.php', //上文件处理的URL method: 'POST', //上文件的方式 items: [{ xtype: 'filefield', //上文件的组件 name: 'file', //上文件的参数名 fieldLabel: '选择文件', labelWidth: 70, msgTarget: 'side', allowBlank: false, buttonText: '浏览...' }], buttons: [{ text: '上', handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ success: function(form, action) { Ext.Msg.alert('成功', action.result.msg); }, failure: function(form, action) { Ext.Msg.alert('失败', action.result.msg); } }); } } }] }); ``` 2. 创建一个Ext.form.field.File组件,用于选择要上文件。 ```javascript { xtype: 'filefield', name: 'file', fieldLabel: '选择文件', labelWidth: 70, msgTarget: 'side', //错误提示的位置 allowBlank: false, //是否允许为空 buttonText: '浏览...' //选择文件按钮的文本 } ``` 3. 在表单中添加按钮,用于提交表单数据。 ```javascript { xtype: 'button', text: '上', handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { //验证表单是否合法 form.submit({ //提交表单数据 success: function(form, action) { Ext.Msg.alert('成功', action.result.msg); }, failure: function(form, action) { Ext.Msg.alert('失败', action.result.msg); } }); } } } ``` 4. 在服务端处理上文件。 在上面的代码中,上文件处理的URL为'upload.php',需要在该文件中处理上文件,将文件保存到服务器上。具体代码如下: ```php <?php $targetDir = "uploads/"; //上文件保存的目录 $targetFile = $targetDir . basename($_FILES["file"]["name"]); //上文件的路径 $uploadOk = 1; $imageFileType = strtolower(pathinfo($targetFile,PATHINFO_EXTENSION)); //文件类型 //检查文件是否已经存在 if (file_exists($targetFile)) { echo json_encode(array('msg' => '文件已经存在')); $uploadOk = 0; } //检查文件大小 if ($_FILES["file"]["size"] > 5000000) { // 5MB echo json_encode(array('msg' => '文件太大')); $uploadOk = 0; } //检查文件类型 if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) { echo json_encode(array('msg' => '只允许上jpg、png、jpeg和gif格式的文件')); $uploadOk = 0; } //上文件 if ($uploadOk == 0) { echo json_encode(array('msg' => '上失败')); } else { if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) { echo json_encode(array('msg' => '文件成功')); } else { echo json_encode(array('msg' => '上失败')); } } ?> ``` 以上就是在EXT.js中实现上文件功能的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值