ExtJs + SpringMVC 文件上传

最新推荐文章于 2017-11-12 20:15:00 发布

杜森的博客

最新推荐文章于 2017-11-12 20:15:00 发布

阅读量624

点赞数

CC 4.0 BY-SA版权

分类专栏： extjs 文章标签： extjs

本文链接：https://blog.youkuaiyun.com/u014775418/article/details/76396352

extjs 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何使用ExtJs作为前端框架，结合SpringMVC进行文件上传操作。在ExtJs中，通过一个按钮触发上传方法，而在SpringMVC后端，配置静态资源管理器，并依赖commons-fileupload库进行文件处理。博主详细讲解了SpringMVC的上传文件方法，并指出返回的SubmitResultModel是根据ExtJs需求自定义的数据模型。

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

ExtJs 代码（首先你要找一个按钮来触发这个方法）

function uploadHeatingStationAttachment(obj){
    var winUpload = Ext.define('upload.form.Window', {
        title: '资源上传',
        width: 400,
        height: 120,
        id: 'uploadWindow',
        minWidth: 300,
        extend: 'Ext.window.Window',
        minHeight: 100,
        layout: 'fit',
        plain: true,
        bodyStyle: 'padding:5px;',
        buttonAlign: 'center',
        items: [{
            xtype: 'form',
            //baseCls: 'x-plain',
            labelWidth: 80,
            fileUpload: true,
            id: 'fileUploadForm',
            //defaultType: 'textfield', 
            items: [{
                xtype: 'filefield',
                width: 360,
                labelAlign: 'right',
                labelWidth: 60,
                id: 'upFile',
                name: 'upFile',
                fileUpload: true,
                fieldLabel: '*文件名',
                labelStyle: 'color:red;',
                allowBlank: false,
                //emptyText:'请选择xls或者xlsx格式的文件',
                buttonText: '选择文件',
                //regex:/\.xls$|\.xlsx$/,
                invalidText: '文件格式不正确'
            }, {
                xtype: 'textfield',
                fieldLabel: 'hsId',
                name: 'hsId',
                hidden: true,
                allowBlank: false,
            }]
        }],
        buttons: [{
            text: '上 传',
            handler: function() {
                var formUpload = Ext.getCmp('fileUploadForm');
                if (formUpload.form.isValid()) {
                    formUpload.getForm().submit({
                        url: basePath + '/Infrastructure/HeatingStationAttachment/UploadFile',
                        timeout: 100000,
                        waitMsg: '文件正在上传，请耐心等待....',
                        method: 'post',
                        params: {

                        },
                        success: function(response) {
                            Ext.Msg.alert('系统提示', '上传成功！');
                            Ext.getCmp('uploadWindow').close();
                            heatingStationAttachmentStore.load();
                        },
                        failure: function(response) {
                            Ext.Msg.alert('系统提示', '操作失败！');
                            return;
                        }
                    });
                }
            }
        }, {
            text: '取 消',
            handler: function() {
                winUpload.hide();
            }
        }]
    });
    var win = Ext.create("upload.form.Window", {
       isCreate: false,
       modal: true,
    });
    win.down("form").getForm().setValues(record);   
    win.show();
}

Spring MVC 中的配置在SpringMVC 的配置文件中

 <!-- 配置文件解析器 -->
<bean id="multipartResolver"
  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="utf-8"></property>
    <property name="uploadTempDir" value="/temp"></property>
    <property name="maxUploadSize">
    <value>209715200</value><!-- 200MB -->
    </property>
    <property name="maxInMemorySize">
    <value>4096</value><!-- 4KB大小读写 -->
    </property>
</bean>

在SpringMVC 的配置文件中配置静态资源管理器

<mvc:resources mapping="/resources/**" location="/resources/"></mvc:resources>

我的SpringMVC 的上传方法中用到 commons-fileupload这个包下面是 Maven的配置如果你的项目不是Maven的也可以直接在项目中加入Jar包

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>

下面最重要的就是上传文件的方法了

@ResponseBody@ RequestMapping("/Infrastructure/HeatingStationAttachment/UploadFile")
public SubmitResultModel ds_upload(@RequestParam("upFile") MultipartFile file, HttpServletRequest request, HttpServletResponse response) {
    String fullName = file.getOriginalFilename();
    String ext = fullName.substring(fullName.lastIndexOf(".") + 1);
    String fileName = fullName.substring(0, fullName.lastIndexOf("."));
    String dateString = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
    String url = "resources/" + dateString;
    String dirPath = request.getRealPath(url);
    //图片重命名
    String newName = UUID.randomUUID().toString() + "." + ext;
    //获取上传的图片具体路径
    File targetFile = new File(dirPath, fileName + newName);
    System.out.println(dirPath);
    //获取父目录
    File pfile = new File(targetFile.getPath());

    if (!pfile.exists()) pfile.mkdirs();
    //上传文件到目标文件夹--文件的赋值
    try {
        file.transferTo(targetFile);
    } catch (Exception e) {
        ((Throwable) e).printStackTrace();
    } // 文件上传
    return new SubmitResultModel(true, "ds");
}

最后返回的是SubmitResultModel是根据ExtJs要求自己定义的
大致是这样 Get Set 我就不写了

public class SubmitResultModel {
    private Boolean success;
    private String msg;
    Constructor(success,msg);
    getter;
    setter;
}