Extjs4文件上传，后台struts2

在本文中，我们将深入探讨如何使用ExtJS 4与Struts2框架实现文件上传功能。ExtJS是一个强大的JavaScript库，提供了丰富的用户界面组件，而Struts2是Java Web开发中的一个MVC框架，用于处理后端业务逻辑。下面，我们将会讲解如何整合这两个技术来实现前端的文件选择和上传，以及后端的文件接收与存储。 让我们从ExtJS 4的文件上传组件开始。`Ext.form.Basic`是ExtJS中处理表单的核心类，它包含了一个`fileField`组件，用于选择本地文件。创建一个包含`fileField`的表单，你需要定义以下配置： ```javascript var form = Ext.create('Ext.form.Panel', { width: 500, bodyPadding: 10, frame: true, title: 'File Upload', items: [{ xtype: 'filefield', name: 'upload', fieldLabel: '选择文件', buttonText: '浏览...' }], buttons: [{ text: '上传', handler: function() { form.getForm().submit({ url: 'upload.action', // 这里的url应指向Struts2的Action method: 'POST', waitMsg: '正在上传...', success: function(form, action) { Ext.Msg.alert('成功', '文件已成功上传!'); }, failure: function(form, action) { Ext.Msg.alert('失败', action.result.message); } }); } }] }); ``` 在上述代码中，我们创建了一个表单面板，其中包括一个`fileField`，用户可以通过它选择要上传的文件。按钮点击事件触发表单提交，指定的URL是Struts2的Action，用于处理上传请求。 接下来，我们需要配置Struts2来处理这个上传请求。在`struts.xml`配置文件中，我们需要添加一个Action配置，如下所示： ```xml <action name="upload" class="com.yourpackage.UploadAction"> <interceptor-ref name="defaultStack"/> <result name="success">/success.jsp</result> <result name="error">/error.jsp</result> </action> ``` 这里，`UploadAction`是你自定义的Action类，负责处理文件上传。`defaultStack`拦截器包含了文件上传所需的默认配置。 在`UploadAction`中，我们需要使用Struts2的`CommonsFileUploadInterceptor`拦截器，该拦截器允许处理multipart/form-data类型的请求，即文件上传请求。例如： ```java public class UploadAction extends ActionSupport { private File upload; private String uploadFileName; public File getUpload() { return upload; } public void setUpload(File upload) { this.upload = upload; } public String getUploadFileName() { return uploadFileName; } public void setUploadFileName(String uploadFileName) { this.uploadFileName = uploadFileName; } @Override public String execute() throws Exception { if (upload != null && !upload.isEmpty()) { // 这里可以进行文件的保存操作 File targetFile = new File("/path/to/save/" + uploadFileName); Files.copy(upload.toPath(), targetFile.toPath(), StandardCopyOption.REPLACE_EXISTING); return SUCCESS; } else { addFieldError("upload", "请选择要上传的文件"); return ERROR; } } } ``` 在`execute`方法中，我们检查了是否有文件被选中，如果有的话，将其保存到服务器的指定路径。`addFieldError`用于在文件未选择时返回错误消息。 别忘了在Struts2的配置中启用文件上传功能： ```xml <constant name="struts.multipart.maxSize" value="10485760" /> ``` 这将允许最大10MB的文件上传。 通过结合ExtJS 4的文件上传组件和Struts2的Action，我们可以实现一个完整的文件上传功能。用户可以在前端选择文件，然后通过Struts2的Action进行后端处理，包括验证、存储等操作。在实际项目中，你可能还需要考虑其他因素，如文件类型限制、大小限制、错误处理等，以提供更安全和健壮的文件上传功能。