Extjs多表单合并提交【含文件,含数组】

17 篇文章 0 订阅
【1,表单合并上传】Ext中将多个表单合并为一个表单的可以采用Ext.form.Basic表单。假设我们有两个表单,第一个表单(form1)里有一个文件(name:file)和若干字符串,第二个表单(form2)有一个字符串数组(name:array)和若字符串需要提交。
</pre><pre name="code" class="javascript">var form = new Ext.form.Basic(window,{});
form.setValues(form1.getValues());
form.setValues(form2.getValues());
form.submit({
 url:'....', 
 success:function() { ... },
 failure:function(){ ... }
});

其中,window是一个容器,Ext的panel或者window都可以。


这样,表单的内容就可以上传了。


【2,后台处理】

后台为了方便,用两个类,一个处理表单(Form),一个处理请求(Work)。

Form.java

public UploadAppForm(MultipartFormDataInput dataInput) throws Exception {
	Map<String, List<InputPart>> uploadForm = dataInput.getFormDataMap();
	List<InputPart> fileParts = uploadForm.get("file");
	appName = getFormString(uploadForm.get("appName"));
	
	if (fileParts != null && !fileParts.isEmpty()) {
		InputPart inputPart = fileParts.get(0);
		InputStream inputStream = inputPart.getBody(InputStream.class, null);
		file = new File(appName+"."+domains);
		inputstreamtofile(inputStream, file);
	}
	services = getFormList(uploadForm.get("array"));
	domains = getFormString(uploadForm.get("template.domain"));
		 

}

private String getFormString(List<InputPart> params) throws Exception{
	InputPart inputPart = params.get(0);
	InputStream inputStream = inputPart.getBody(InputStream.class, null);
	byte[] bytes = IOUtils.toByteArray(inputStream);
	return new String(bytes, "utf-8");
}

Work.java

@Path("/upload")
@POST
@Consumes("multipart/form-data")
public void uploadApp(MultipartFormDataInput dataInput) {
	UploadAppForm form = new UploadAppForm(dataInput);
	
	File file = form.getFile();
	String appName = form.getAppName();
	List<String> services = form.getServices();
	String domain = form.getDomains();

    do something ...

}


这样,就可以处理了。


其实,最简单的办法就是做一个大表单出来,然后设好值。

ExtJS 中,可以使用组件 `Ext.form.Panel` 和 `Ext.form.field.File` 来实现文件上传功能,而不需要使用表单提交。 首先,需要创建一个 `Ext.form.Panel` 组件,并设置 `enctype` 属性为 `multipart/form-data`,表示上传文件的数据类型为二进制数据。然后,在该组件中添加一个 `Ext.form.field.File` 组件,用于选择要上传的文件。 在提交表单时,可以通过 `Ext.Ajax.request` 方法发送请求,将上传的文件作为请求参数发送到服务器端。具体实现代码如下: ```javascript Ext.create('Ext.form.Panel', { title: '文件上传示例', width: 400, bodyPadding: 10, renderTo: Ext.getBody(), items: [{ xtype: 'filefield', name: 'file', fieldLabel: '选择文件', labelWidth: 100, msgTarget: 'side', allowBlank: false, anchor: '100%', buttonText: '浏览...' }], buttons: [{ text: '上传', handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ url: 'upload.php', waitMsg: '正在上传文件,请稍候...', success: function(form, action) { Ext.Msg.alert('提示', '文件上传成功!'); }, failure: function(form, action) { Ext.Msg.alert('错误', '文件上传失败!'); } }); } } }] }); ``` 在上述代码中,`Ext.form.Panel` 组件中添加了一个 `Ext.form.field.File` 组件,其 `name` 属性设置为 `file`,表示上传的文件对应的参数名为 `file`。在点击上传按钮时,通过 `Ext.form.Panel` 组件的 `getForm` 方法获取到表单对象,然后通过 `isValid` 方法检查表单是否合法。如果表单合法,则通过 `submit` 方法提交表单数据,其中 `url` 属性设置为上传文件的服务器地址,`waitMsg` 属性设置为上传文件时显示的等待信息。在上传成功或失败后,分别通过 `success` 和 `failure` 回调函数进行处理。 在服务器端,可以使用 PHP 等脚本语言处理上传的文件。例如,以下是一个简单的 PHP 代码示例,用于接收上传的文件并保存到服务器上: ```php <?php $targetDir = "uploads/"; $targetFile = $targetDir . basename($_FILES["file"]["name"]); if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) { echo "文件上传成功!"; } else { echo "文件上传失败!"; } ?> ``` 在上述 PHP 代码中,`$_FILES["file"]` 表示上传的文件对象,可以通过 `tmp_name` 属性获取上传文件的临时文件名,通过 `name` 属性获取上传文件的原始文件名。`move_uploaded_file` 函数用于将上传的文件移动到指定目录中。当文件上传成功时,打印出文件上传成功的提示信息,否则打印出文件上传失败的提示信息。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值