`

Ext文件上传

Ext 
阅读更多
Ext文件上传

* Ext上传:
ext文件上传需要扩展控件的支持:
<form id="uploadFileForm" action="" method="post" enctype="multipart/form-data">
   <div id="fileupload" style="cursor:hand;"></div>
</form>
1 前台js代码
var uploadForm = new Ext.BasicForm('uploadFileForm'); 

var fileUploadBt = new Ext.ux.form.FileUploadField({
   renderTo: 'fileupload',        
   buttonOnly: true,
   buttonText: 'Excel导入',
   buttonCfg: {
       iconCls: 'download'
       //tooltip: '从Excel导入物料信息'
   },
   listeners: {
       'fileselected': function(fb, v){
       //v 为文件路径
       if(fac.getValue() == ''){
           Ext.Msg.alert('操作提示', '请先选择一个成本中心或填写内部订单号!');
           fb.reset();
       }else{
           indexFun.addMarcFromExcel(v);
       }
       }
   }
});
uploadForm.add(fileUploadBt);

addMarcFromExcel :function(filePath){
   uploadForm.submit({
       fileUpload: true,
       standardSubmit: true,
       url: '<c:out value="${path}" />/purchaseApply.htm?method=parseExcel',
       params: {
       costCenter: costCenter.getValue(),
       factNo: costCenterCmbStore.getAt(costCenterCmbStore.find('costNo',costCenter.getValue())).get('factNo'),
       internalOrder: internalOrder.getValue()
       },
       waitMsg: '文件上传中,请等待...',    
       waitTitle: '上传进度条',
       success: function(form,action){            
       yyExt.info('导入成功', msgContent);
       for(var i=0;i<action.result.prdArr.length;i++){
           indexFun.insertMarcToGrid(action.result.prdArr[i]);
       }
       form.reset();
       },
       failure: function(form, action) {
       form.reset();
       switch (action.failureType) {
           case Ext.form.Action.CLIENT_INVALID:
           Ext.Msg.alert('导入失败', 'Form fields may not be submitted with invalid values');
           break;
           case Ext.form.Action.CONNECT_FAILURE:
           Ext.Msg.alert('导入失败', 'Ajax communication failed');
           break;
           case Ext.form.Action.SERVER_INVALID:
              Ext.Msg.alert('导入失败', action.result.msg);
          }
       }
   }); 
}

2 后台java代码:
/**
* org.apache.commons.fileupload.servlet.ServletFileUpload
* 采用apache的ServletFileUpload解析request中的文件,并将文件相关信息封装进一个FileBean对象
*/
FileUploadUtil fileTool = new FileUploadUtil();
fileTool.setServletFileUpload(this.getServletFileUpload());
fileTool.setSizeMax(this.getFileMaxSize());
fileTool.init(request);
fileTool.setSaveFile(false); //上传的文件不保存到硬盘
FileBean fileBean = fileTool.saveFile();
/*
* 提取其他参数
*/
String costCenter = fileTool.getParameter("costCenter"); //成本中心
String factNo = fileTool.getParameter("factNo"); //工厂编号
String internalOrder = fileTool.getParameter("internalOrder"); //内部订单


* Ext下载:Ext没有对下载做任何处理,下载采用一般方式即可。
采用form提交方式:
<form  id="queryForm" target="myframe" method="post">
   <input type="text" id="marcNo" name="marcNo" style="width: 180px;">
   <input type="text" id="marcName" name="marcName" style="width: 100px">
</form>
//导出物料信息
download: function(){
   $("queryForm").action = "<c:out value="${path}"/>/marcInfo.htm?method=download";
   $("queryForm").submit();
}
后台java代码:
public ModelAndView download(HttpServletRequest request,HttpServletResponse response) throws Exception{
       response.setCharacterEncoding(this.DEFAULT_ENCODE);
       //取得输出流
       OutputStream out = response.getOutputStream();
       //清空输出流
       response.reset();
   try {
   /**
    * 1 提取条件参数
    */
   String marcNo = RequestUtil.getParameter(request, "marcNo", null); //物料编码
   String marcName = RequestUtil.getParameter(request, "marcName", null); //品名

   //设置响应头和下载保存的文件名
   response.setHeader("Content-Type","text/html; charset=UTF-8");
   response.setHeader("content-disposition","attachment;filename="+excelModel.getPath());
   //定义输出类型
   response.setContentType("APPLICATION/msexcel");  
   /**
    * 2 根据条件参数得到相关文件的输出流,将输出流写回前台
    */

   } catch (Exception e) {
       log.error("下载物料信息出错:"+e.getMessage());
   }finally{
       out.close();
       out.flush();
   }
   return new ModelAndView(this.indexView,"sessionUserName",super.getSessionUser(request).getUserName());
}

 

 

*************************************************************************************

/*
*
* This file is part of Ext JS 4
*
* Copyright (c) 2011 Sencha Inc
*
*
* GNU General Public License Usage This file may be used under the terms of the
* GNU General Public License version 3.0 as published by the Free Software
* Foundation and appearing in the file LICENSE included in the packaging of
* this file. Please review the following information to ensure the GNU General
* Public License version 3.0 requirements will be met:
*
* If you are unsure which license is appropriate for your use, please contact
* the sales department at http://www.sencha.com/contact.
*
*/
Ext.require(['Ext.form.field.File', 'Ext.form.Panel', 'Ext.window.MessageBox']);
 
Ext.onReady(function() {
 
Ext.define('State', {
extend : 'Ext.data.Model',
autoLoad : false,
fields : [{
type : 'string',
name : 'text'
}, {
type : 'string',
name : 'flag'
}]
});
var store = Ext.create('Ext.data.Store', {
model : "State",
proxy : {
type : "ajax",
url : "./totosea/js/combobox_1.js",
reader : {
type : "json"
}
},
autoLoad : true
});
 
var upform = Ext.create('Ext.form.Panel', {
renderTo : 'adminfileupdata',
width : 500,
id : "upform",
frame : true,
title : '文件上传',
bodyPadding : '10 10 0',
x : 40,
y : 40,
defaults : {
anchor : '100%',
allowBlank : false,
msgTarget : 'side',
labelWidth : 100
},
 
items : [{
xtype : 'combobox',
fieldLabel : '文件用途',
emptyText : '请选择文件用途分类',
store : store,
displayField : 'text',
valueField : 'flag',
name : 'flag'
}, {
xtype : 'textfield',
fieldLabel : '自定义文件名称',
emptyText : '请自定义文件名称,必填!',
name : "uplname"
}, {
xtype : 'filefield',
id : 'form-file',
emptyText : '请选择本地文件',
fieldLabel : '上传地址',
name : 'upl',
buttonText : '上传',
buttonConfig : {
iconCls : 'upload-icon'
}
}],
 
buttons : [{
text : '上传',
handler : function() {
var form = this.up('form').getForm();
if(form.isValid()) {
form.submit({
url : 'uploadAdmin.do',
waitMsg : '正在上传您的文件,请耐心等候...',
success : function(form, action) {
Ext.Msg.alert('提示信息', "文件保存成功");
},
failure : function() {
Ext.Msg.alert("提示信息", "对不起,文件保存失败");
}
});
}
}
}, {
text : '重置',
handler : function() {
this.up('form').getForm().reset();
}
}]
});
});

 

[{
'text': '可执行sql文件(TXT)',
'flag': '1'
}, {
'text': '普通文件',
'flag': '2'
}]

 

/**
* 资源文件上传到服务器
*/
publicvoiduploadAdmin() {
 
String flag = this.servletRequest.getParameter("flag");
String uplname = this.servletRequest.getParameter("uplname");
 
String filePath = this.getDocumentAdminPath() + uplFileName;
File file = newFile(filePath);
 
/**
* 保存文件
*/
ResourceFile a = newResourceFile();
a.setCreateDate(newDate());
a.setContentType(this.uplContentType);
a.setFilePath("/document/admin/"+ uplFileName);
a.setFlag(Integer.parseInt(flag));
a.setExeNumber(0);
a.setExtension(ActionUtil.getExtention(uplFileName).substring(1));
a.setName(uplname);
 
/**
* 复制文件到磁盘
*/
ActionUtil.copy(upl, file);
try{
this.hibernateService.save(a);
} catch(Exception e) {
e.printStackTrace();
}
/**
* 返回结果
*/
// JSONObject json = new JSONObject();
// json.put("msg", "文件上传成功");
// json.put("success", "true");
// System.out.println(json.toString());
// JsonResult.json(json.toString(), servletResponse);
}

 

复制代码
    <action name="uploadAdmin" class="fileAction"            method="uploadAdmin">
            <interceptor-ref name="fileUpload">
                <param name="allowedTypes">                    application/vnd.ms-word, application/vnd.ms-excel,                    application/pdf, text/plain,application/kswps                </param>
                <param name="maximumSize">104857600</param>
                <param name="savePath">/upload</param>
            </interceptor-ref>
            <interceptor-ref name="defaultStack" />
            <result name="success">${successValue}</result>
            <result name="r" type="redirect">${successValue}</result>
        </action>

 

 

分享到:
评论

相关推荐

    Ext 文件上传参考文档

    Ext 文件上传参考文档主要涉及的是在Web开发中处理文件上传的场景,特别是使用ExtJS框架进行前端交互。ExtJS是一个强大的JavaScript库,用于构建复杂的、数据驱动的Web应用程序。文件上传是用户界面中的常见功能,...

    Ext 文件上传的完整列子

    在Web开发中,文件上传是一项常见的功能,尤其在企业级应用和社交网络中更是不可或缺。ExtJS是一个强大的JavaScript库,提供了丰富的组件和功能,其中包括文件上传。本示例将详细介绍如何在ExtJS环境中实现文件上传...

    Ext 文件上传demo

    EXT文件上传Demo是一个基于EXT库实现的交互式文件上传示例。EXT是一个强大的JavaScript库,专为构建富互联网应用程序(RIA)而设计。它提供了丰富的组件库,包括表格、面板、菜单、表单等,以及复杂的布局管理和数据...

    ext 文件上传

    "ext 文件上传"这个主题可能指的是EXTJS框架中的文件上传组件或者相关的扩展功能。EXTJS是一个流行的JavaScript库,用于构建富客户端应用程序,它提供了丰富的组件和强大的数据绑定机制。 在EXTJS中,文件上传通常...

    Ext文件上传完整包

    通过这个"Ext文件上传完整包",开发者可以获得一个完整的文件上传解决方案,无需从零开始编写所有代码,大大提高了开发效率。在使用过程中,确保理解每个组件的工作原理和API,以便灵活地定制和扩展功能以满足特定...

    Ext文件上传、下载

    这篇博文“Ext文件上传、下载”将深入探讨如何利用`Ext`库来实现这一功能。由于描述部分为空,我们将主要依赖标题和标签来推测并解释相关知识点。 首先,我们要理解`Ext`的核心概念。`Ext`是基于`Sencha Touch`和`...

    EXT文件上传源码

    EXT文件上传源码 项目描述 Ext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了,主要包括 data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面向对象编 程(oop),扩展性相当的好....

    Ext 文件上传 Icons

    在本文中,我们将深入探讨如何在ExtJS框架中实现文件上传功能,并且特别关注"Ext 文件上传 Icons"这一主题。ExtJS是一个强大的JavaScript库,用于构建富客户端应用程序,其组件模型强大,支持丰富的用户界面元素。当...

    Ext上传文件例子(入门)

    本篇文章将聚焦于"Ext上传文件例子(入门)",通过一个简单的实例来讲解如何在ExtJS框架下实现文件上传功能。 首先,我们要理解文件上传的基本原理。在Web应用中,文件上传通常依赖于HTML的`&lt;input type="file"&gt;`元素...

    ext文件上传下载

    在EXTJS中,文件上传通常会用到`Ext.form.Panel`组件,它包含一个或多个`Ext.form.field.File`(文件选择字段),也被称为“上传按钮”。这个组件允许用户选择本地文件,并在提交表单时将文件数据发送到服务器。以下...

    一个Ext的上传文件的控件,能上传中文文件。

    一个Ext的上传文件的控件。修改过的源码。能上传中文文件。

    EXT文件批量上传源代码

    EXT文件批量上传源代码是一种基于EXT JavaScript库实现的前端文件上传解决方案。EXT是一个强大的富客户端JavaScript框架,它提供了丰富的组件库,用于构建交互性强、功能丰富的Web应用。EXT的文件批量上传功能允许...

    ext上传文件

    标题中的“ext上传文件”可能指的是使用EXTJS(一个JavaScript库)进行文件上传的功能。EXTJS提供了一套完整的用户界面组件,其中包括文件上传组件,它允许用户在Web应用中方便地上传文件。EXTJS通常与后端服务器...

    Ext3.0实现多文件上传.rar

    在“Ext3.0实现多文件上传.rar”这个压缩包中,我们聚焦于一个特定的功能:使用Ext3.0来实现实时的多文件上传功能。这个功能通常在网页应用中用于让用户能够一次性上传多个文件,如图片、文档等,极大地提高了用户...

    ext4.0 多文件上传

    下面,我们将结合ext4.0文件系统的特性以及多文件上传技术的实现,全面深入地探讨这个主题。 ext4.0文件系统在Linux内核中占据了举足轻重的地位,其作为ext3的升级版,主要通过引入多项创新技术来优化文件存储性能...

    Ext上传文件 Demo

    本示例“Ext上传文件 Demo”聚焦于如何使用Ext JavaScript库与ASP.NET后端相结合来实现文件上传。下面将详细阐述相关知识点。 首先,Ext是一个强大的JavaScript框架,用于构建富客户端应用程序。它提供了丰富的组件...

    ext上传组件,可以多文件上传

    EXT上传组件是一款基于Flash技术的前端文件上传工具,它提供了多文件上传的功能,极大地提升了用户在上传文件时的体验和效率。EXT是一个流行的JavaScript库,主要用于构建富客户端应用程序,而EXT上传组件是EXT库的...

    ext多文件上传

    首先,EXTJS中的`Ext.form.Panel`组件是实现多文件上传的基础。我们需要创建一个包含`Ext.form.FileField`的表单,这是EXTJS中用于处理文件输入的组件。在`FileField`中,我们可以通过设置`multiple`属性为`true`来...

    Ext 实现 文件上传 进度显示

    `Ext`是一个流行的JavaScript框架,用于构建富客户端应用程序,而实现文件上传进度显示则为用户提供更好的用户体验。本篇文章将详细探讨如何利用`Ext`来实现文件上传的进度显示,并结合`commons-fileupload`库进行...

    Ext2.0 文件上传组件

    "Ext2.0 文件上传组件"是一个用于Web应用程序的组件,它允许用户在浏览器中方便地上传文件。这个组件基于Ext JavaScript库的2.0版本,Ext是一个强大的前端开发框架,提供了丰富的用户界面组件和数据管理功能。在本文...

Global site tag (gtag.js) - Google Analytics