Extjs多表单合并提交【含文件，含数组】_extjs form表单提交包含文件-优快云博客

本文链接：https://blog.youkuaiyun.com/lmxmimihuhu/article/details/38655923

本文介绍如何在 Ext 框架下将多个表单合并，并实现文件上传功能。通过示例展示如何使用 Ext.form.Basic 表单，以及后台处理逻辑，包括表单解析、文件保存和请求处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【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 ...

}

这样，就可以处理了。

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