ExtJS的FileUploadField组件上传多个文件
本文由发表于7年前 | Javascript | 评论数 2 |  被围观 25,650 views+

一、在页面引入相关的JS文件

Ext.ux.form.FileUploadField是ExtJS的文件上传组件,如果要使用它,可以从ExtJS的安装目录下的/examples/ux目录拷贝到项目中,然后在head里面引入js文件,比如放在网站的script目录下,可以这样写:

<script type="text/javascript" src="script/ux/FileUploadField.js"></script>

当然,其他和ExtJS相关的JS文件和CSS文件照常引入。

二、编写服务器端上传处理文件

准备服务器端的上传处理文件,这里的后台处理文件为uploadFilesAction.java,其实现可以参看这篇文章:
Struts2的一个和多个文件上传的实现

该文件在struts.xml文件中的配置如下:

<package name="struts2" namespace="/" extends="struts-default">
	<action name="uploadFiles"			
             class="uploadtest.actions.UploadFilesAction">
		<result name="result">/WEB-INF/result.jsp</result>	
		<param name="uploadPath">D:\UploadFiles\</param>
	</action>
</package>
三、服务器端返回result.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
  <html>
    <head>
      <title>服务器处理结果</title>     
    </head>    
    <body>       
      <s:property value="result"/>
    </body>
  </html>
四、编写JS代码

接下来就是在JSP页面中编写ExtJS的界面了,这里使用了Ext.ux.form.FileUploadField组件,相关的JS代码如下:

Ext.onReady( function()
{
	var uploadFormPanel = new Ext.FormPanel(
	{
		renderTo : 'upload-div',
		fileUpload : true,
		border : true,
		labelWidth : .5,
		bodyStyle : 'padding: 10px;',			
		items :
		[ 
			//第一个上传控件
			new Ext.ux.form.FileUploadField(
		{
			buttonText : '文件1...',
			name : 'upload',
			width : 200
		}), new Ext.ux.form.FileUploadField(
		{
			//第二个上传控件
			buttonText : '文件2...', 
			name : 'upload',
			width : 200				
		}) ],
		buttons :
		[{
			//上传提交按钮
			text : '本地上传',
			handler : function()
			{
				if (uploadFormPanel.getForm().isValid())
				{
					uploadFormPanel.getForm().submit(
					{
						url : 'uploadMoreFiles.action',
						waitMsg : '图片上传中...',
						success : function(form, action)
						{
							alert(action.result.msg);
						}
					});
				}
			}
		}]
	});
});

需要的html标签如下:

<div id="upload-div"></div>
<div id="upload-div-msg" style="display: none;"></div>
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/extjss-fileuploadfield-multiple-files-upload-component.html
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 5/8
文章评论
    2条评论
  1. _魔妃 2012年06月19日15:53:53  #-49楼 回复 回复

    var upload_Panel1 = new Ext.Panel({
    layout:’form’,
    buttonAlign :’center’,
    plain:true,
    items:[
    {
    columnWidth : “1”,
    layout : “column”,
    bodyStyle:’padding:0px’,
    plain:true,
    items : [{
    columnWidth : “.40”,
    layout : ‘form’,
    plain:true,
    items : [{
    fieldLabel:’*月份:’,
    id:’monthDate’,
    name:’monthDate’,
    xtype:’combo’,
    store:queryStore,
    valueField:’value’,
    displayField:’text’,
    typeAhead:true,
    mode:’local’,
    triggerAction : ‘all’,
    selectOnFocus : true,
    readOnly : true,
    anchor : ‘100%’
    }]
    },{
    columnWidth : “.60”,
    layout : ‘form’,
    plain:true,
    items : [
    new Ext.ux.form.FileUploadField(
    {
    fieldLabel:’*统计表’,
    //buttonText : ‘统计表’,
    name : ‘uploadFile’,
    id: ‘uploadFile’,
    width : 200
    })]
    }
    ]}
    ]
    });

    我使用这样的上传js,但是页面显示
    *统计表: 文本框1 文本框2 浏览…
    Browser…
    这样的,点击Browser无反应,点击浏览,文本框1、2均有值。
    这可能是什么原因呢?

  2. 123 2014年02月20日12:58:44  #-48楼 回复 回复

    后台怎么写

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 二叉树的前序遍历、中序遍历和后序遍历及其算法 2011/5/19
2 Semaphore的介绍和使用 2012/7/30
3 Java虚拟机笔记 – JVM 类的卸载 2011/11/5
4 Android中的常用控件及其基本用法 2011/7/12
5 Java基础笔记 – Java中的Exception异常 自定义异常 2011/11/2
6 JavaScript设计模式笔记 – 单例模式 链式调用 2012/10/25
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.