`
xmy20051643
  • 浏览: 39678 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

extjs5.1多文件上传控件

 
阅读更多
items: [{
                            itemId: 'htlb',
                            height: 160,
                            xtype: 'extMutilUploadPanel',
                            uploadConfig : {
                                url : $GLOBAL.CONTEXT_PATH + "/saveArchivements",
                                downloadUrl : $GLOBAL.CONTEXT_PATH + "/download"
                            },
                            storeLoadUrl : $GLOBAL.CONTEXT_PATH  + $GLOBAL.REQUEST.PROJECTS['getContractList'],
                            listeners : {
                                'FilesUploadComplete' : function(fileStore) {
                                    var idsArray = new Array();
                                    for (var index = 0; index < fileStore.getCount(); index++) {
                                        var record = fileStore.getAt(index);
                                        idsArray.push(record.get('id'));
                                    }
                                    var htlb = idsArray.join(",");
                                    _this.down('hidden[name="xmht"]').setValue(htlb);
                                }
                            }
                        }]


 

以上是用例代码 要引入的文件有: '/styles/extjs/${extVersion }/js/plugins/ExtjsMutilUploader/plupload/plupload.full.min', '/styles/extjs/${extVersion }/js/plugins/ExtjsMutilUploader/ExtMutilUploadPanel', 这几天生病,没有更新过BLOG,所以这个例子也是从以前的代码中抄出来的,控件在附件中,下回去就可以用。

上传到后文件上传到后台后,前台将对文件自动生成一个uuid,可以通过store取到,然后保存就可以。

 

后台代码:

/**
     * 保存或更新上传文件
     *
     * @return
     * @author xiaomingyang
     * Created On 2016年7月24日,21时38分
     */
    @Before(SysLogInterceptor.class)
    @LoggedAs("保存或更新上传文件")
    public void saveArchivements() throws NestedTransactionHelpException {
        Map<String, Object> jsonMap = new HashMap<String, Object>();
        try {
            UploadFile uploadFile = this.getFile();
            if (uploadFile == null) {
                jsonMap.put("ok", true);
            }
            String fileName = uploadFile.getFileName();
            String contentType = uploadFile.getContentType();
            File upFile = uploadFile.getFile();
            Long fileSize = upFile.length();
            String saveFileName = StringUtils.getUUIDKey();
            FileUtils.moveFile(upFile, new File(saveFilePath + File.separator + saveFileName));
            EtmFiles etmFile = new EtmFiles();
            etmFile.set("id", StringUtils.getUUIDKey());
            etmFile.set("FILENAME", fileName);
            etmFile.set("FILESIZE", fileSize);
            etmFile.set("FILETYPE", contentType);
            etmFile.set("FILESTORAGEPATH", saveFilePath);
            etmFile.set("FILESTORAGENAME", saveFileName);
            etmFile.set("CREATETIME", DateUtils.getTimeStamp(new Date()));
            etmFile.set("UPLOADERID", ShiroUtils.getUserId());
            etmFile.save();
            jsonMap.put("id", etmFile.get("id"));
            jsonMap.put("ok", true);
            jsonMap.put("success", true);
            renderJson(jsonMap);
        } catch (Exception e) {
            log.error(e.getMessage());
            jsonMap.put("success", false);
            jsonMap.put("ok", true);
            jsonMap.put("msg", e.getMessage());
            renderJson(jsonMap);
            throw new NestedTransactionHelpException(e.getMessage());
        }
    }

 

 这两天人病歪歪的,就不多写了,要用的自己看一看例子,想一下,看下源码就知道了,源码很简单的

分享到:
评论

相关推荐

    extjs5.1引用包

    1. **引入CSS和JavaScript**:首先,在HTML页面中引入ExtJS 5.1的基础样式表和核心脚本文件。通常,需要添加类似以下的链接: ```html &lt;link rel="stylesheet" type="text/css" href="path/to/ext5.1/resources/css/...

    EXTJS 5.1 Examples

    ### EXTJS 5.1 Examples知识点详解 #### 一、EXTJS 5.1 Examples简介 EXTJS 5.1 Examples是一系列针对EXTJS 5.1版本的示例集合,旨在帮助开发者快速上手并深入理解EXTJS框架的各种功能与应用场景。这些示例涵盖了...

    Extjs5.1版本时间时分秒控件

    Extjs时间控件可选年月日时分秒,哪个版本都可使用,谢谢使用

    ExtJs5.1或ExtJs6.0日期时间控件

    Ext5.1或Ext6.0测试通过。 拷贝文件: 将DateTimeField.js 和 DateTimePicker.js放在ext/src/ux目录下 页面引用 requires : [ 'Ext.ux.DateTimeField' ] 使用方式: { fieldLabel:'开始时间', xtype:'...

    ExtJs5 日期自定义控件 精确到时分秒

    在Extjs5.x.js文件后引入以下两文件,注意顺序和路径: 例如: &lt;script type="text/javascript" src="ext/5.1/ext-all-debug.js"&gt; ${src}/DateTimePicker.js"&gt; ${src}/DateTime.js"&gt;&lt;/script&gt;

    EXTJS实用开发指南

    1. **《EXTJS实用开发指南》**: 本书提供了详细的 EXTJS 框架使用方法、控件配置参数、属性、方法及事件介绍等内容,非常适合已经掌握基础的开发者进一步提升技能。 2. **源代码示例**: 可以下载基于 EXTJS 2.0 开发...

    extjs+java+mysql通用后台管理

    首先,EXTJS 5.1版本是EXTJS系列的一个重要里程碑,它带来了更优的性能、更多的组件选项以及改进的响应式设计。EXTJS的MVC(Model-View-Controller)架构模式,使得前后端分离更加清晰,提高了代码的可维护性和扩展...

    Extjs学习教程

    - `d:\aspx\extjs5.1`: SDK的根目录。 - `myapp d:\aspx\test`: 在指定目录创建名为`myapp`的应用程序。 - **文件加载流程**: - 打开`index.html`文件可以看到仅引入了一个`bootstrap.js`文件。 - `bootstrap.js...

    ExtJs官方网站中文的入门指南 javascript

    通过本文档的学习,您已经掌握了ExtJs的基本使用方法,包括环境搭建、核心概念理解、基本控件使用以及Ajax通信等方面的知识。希望这些内容能够帮助您顺利入门ExtJs,为后续更深入的学习打下坚实基础。

    精通JS脚本之ExtJS框架.part2.rar

     《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以通过访问itzcn网站来获得即时在线帮助。  《精通JS脚本之ExtJS框架》可以作为Web开发的自学参考书,也可以作为...

    AnyFo_-_ExtJS_移魂大法

    ##### 3.2 响应ExtJS控件事件 - **JS代码**: ```javascript var button = new Ext.Button({ text: 'Click me', handler: function() { alert('Button clicked!'); } }); ``` #### 4. 窗体 ExtJS提供了...

    ExtJS图书管理系统

    ExtJS的组件和布局机制可以帮助实现流畅的用户交互,例如,使用下拉菜单、滑块、分页控件等,提升用户的操作体验。 总结起来,"ExtJS图书管理系统"是一个综合运用了前端ExtJS框架、后端Java技术及MyEclipse和Tomcat...

    ExtJs2.0简明教程

    - **引入库文件**:将下载的ExtJS文件添加到项目的HTML页面中。 - **编写JavaScript代码**:使用ExtJS提供的API创建用户界面组件,并实现相应的功能逻辑。 #### 2.3 ExtJS版的Hello World 为了熟悉ExtJS的基本用法...

    精通JS脚本之ExtJS框架.part1.rar

     《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以通过访问itzcn网站来获得即时在线帮助。  《精通JS脚本之ExtJS框架》可以作为Web开发的自学参考书,也可以作为...

    Ext表格控件和树控件

    ### Ext表格控件和树控件 #### 表格控件 ##### 1.1 基本表格 `GridPanel` 在Ext JS框架中,`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示...

Global site tag (gtag.js) - Google Analytics