`
andrew.yulong
  • 浏览: 171600 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

extJs之简易上传控件

阅读更多

  ext的官方网站有许多大侠写了许多狠牛的上传控件,但是功能太炫,我感觉反而不适用!效果如下 上传完了之后地址会加载到上传内容这个文本框里面 里面还做了类型判断,用于上传文本和相片代码如下,把一下代码封装在一个js文件里面

//*****************************************上传的公共js***************************************************************//

/**

 * 约定:types为调用时传来的参数.形式为jsp-gig-png

 *      uploadid为上传后要填充路径的控件id

 *      上传的属性均为upload

 * 功能:页面调用openUpload("","");方法即可

 */

//...允许上传的后缀名

var types = "";



//...上传后填充控件的id

var uploadid = "";



function openUpload(type,id){

  	types = type;

	uploadid = id;

  	winUpload.show();

  }



var formUpload = new Ext.form.FormPanel({

    baseCls: 'x-plain',

    labelWidth: 80,

    fileUpload:true,

    defaultType: 'textfield',

    items: [{

      xtype: 'textfield',

      fieldLabel: '文 件',

      name: 'upload',

      inputType: 'file',

      allowBlank: false,

      blankText: '请上传文件',

      anchor: '90%'  // anchor width by percentage

    }]

  });



var winUpload = new Ext.Window({

    title: '资源上传',

    width: 400,

    height:200,

    minWidth: 300,

    minHeight: 100,

    layout: 'fit',

    plain:true,

    bodyStyle:'padding:5px;',

    buttonAlign:'center',

    items: formUpload,

    buttons: [{

      text: '上 传',

      handler: function() {

        if(formUpload.form.isValid()){

          Ext.MessageBox.show({

               title: 'Please wait',

               msg: 'Uploading...',

               progressText: '',

               width:300,

               progress:true,

               closable:false,

               animEl: 'loding'

             });

          formUpload.getForm().submit({    

		    url:'uploadAction.action?types='+types,

            success: function(form, action){

			   var objxzdz = Ext.get(uploadid).dom;

			   var value = action.result.msg;

			   objxzdz.value = value;

               Ext.Msg.alert('成功','上传成功.');

               winUpload.hide();  

            },    

             failure: function(form, action){    

			  //... action生成的json{msg:上传失败},页面就可以用action.result.msg得到非常之灵活

              Ext.Msg.alert('Error', action.result.msg);    

             }

          })           

        }

       }

    },{

      text: '取 消',

      handler:function(){winUpload.hide();}

    }]

  });

//*****************************************上传的公共js***************************************************************//

现在已经封装完毕了,我们看看在页面上如何调用
openUpload("txt-xls-doc-docs-pds","xzdzid");
就这一句话,嘿嘿,简单吧?第一个参数为允许上传的类型,第二个参数为上传后地址要绑定到哪个控件(是该控件的id)

action的代码还是贴下吧
import java.io.File;

import java.io.FileInputStream;

import java.io.FileOutputStream;



import org.apache.struts2.ServletActionContext;



import net.ask123.ecommerce.common.util.Common;

import net.ask123.ecommerce.common.util.Constants;

import net.ask123.ecommerce.common.util.FileOperate;

import net.ask123.ecommerce.common.util.VeDate;



/**

 * 上传的公共方法

 * 

 * @author sam.zhang

 * 

 */

public class UploadAction extends ExtJsonActionSuport {



	/**

	 * 

	 */

	private static final long serialVersionUID = 1L;


        //和前台的名字一样,这里约定是 upload
        private File upload;



	private String uploadContentType;



	private String uploadFileName;



	private String savePath;



	// 存放允许上传的后缀名

	private String types;



	public String getSavePath() {

		return savePath;

	}



	public void setSavePath(String savePath) {

		this.savePath = savePath;

	}



	public File getUpload() {

		return upload;

	}



	public void setUpload(File upload) {

		this.upload = upload;

	}



	public String getUploadContentType() {

		return uploadContentType;

	}



	public void setUploadContentType(String uploadContentType) {

		this.uploadContentType = uploadContentType;

	}



	public String getUploadFileName() {

		return uploadFileName;

	}



	public void setUploadFileName(String uploadFileName) {

		this.uploadFileName = uploadFileName;

	}



	public String getTypes() {

		return types;

	}



	public void setTypes(String types) {

		this.types = types;

	}



	@SuppressWarnings("deprecation")

	public String execute() throws Exception {

		String msg = "";

		FileOperate fo = new FileOperate();



		String sid = VeDate.getNo(4);



		this.savePath = "/updownFiles";



		try {



			// ...获取文件后缀名

			String ext = fo.getFileExt(getUploadFileName());



			if ("".equals(this.types)

					|| Common.indexofString(this.types, "-") == -1) {

				msg = "上传失败";

				this.setJsonString("{success:false,msg:'" + msg + "'}");

				return SUCCESS;

			}



			// ...判断上传的文件是否合法

			boolean istrue = FileOperate.trueExt(this.types.split("-"), ext);

			if (!istrue) {

				msg = "您上传的文件格式不正确,正确格式为" + this.types;

				this.setJsonString("{success:false,msg:'" + msg + "'}");

				return SUCCESS;

			}



			// ...文件存放的位置

			String sPath = ServletActionContext.getRequest().getRealPath(

					this.getSavePath())

					+ Constants.FILESPARA

					+ sid.substring(0, 4)

					+ Constants.FILESPARA

					+ sid.substring(4, 6)

					+ Constants.FILESPARA;



			// ...保存在数据库的路径

			String filePath = this.savePath + "/" + sid.substring(0, 4) + "/"

					+ sid.substring(4, 6) + "/" + sid + "." + ext;



			// 如果目录不存在则创建它



			fo.createFolder(sPath);



			FileOutputStream fileOutputStream = new FileOutputStream(sPath

					+ sid + "." + ext);



			FileInputStream fileInputStream = new FileInputStream(getUpload());

			// ...

			byte[] buffer = new byte[1024];

			int len = 0;

			while ((len = fileInputStream.read(buffer)) > 0) {

				fileOutputStream.write(buffer, 0, len);

			}

			this.setJsonString("{success:true,msg:'" + filePath + "'}");

		} catch (Exception e) {

			this.setJsonString("{success:false}");

			e.printStackTrace();

		}

		return SUCCESS;

	}



}

这里就大致贴贴一下吧,如果看不懂的话把struts2学习下就ok了,这里不一定后台一定是java的,

关键是

url:'uploadAction.action?types='+types,这里会指定后台的请求地址
分享到:
评论
6 楼 max_annie 2009-03-02  
LZ你好,请教一下 ExtJsonActionSuport  是哪个ACTION 能发个源码给我么 max_june@126.com多谢了
5 楼 andrew.yulong 2008-09-17  
应该不会的
  wwwtd好好检查一下
  还有什么问题的话把邮箱发给我
  我传个例子你
4 楼 wwwtd 2008-09-15  
为什么我按照楼主的做了但是前台总是提示:action.result is undefined

这个是什么原因呢?
3 楼 wwwtd 2008-09-13  
请教下,上传完后的那个图片存放的地址是如何放到前台的输入框里边的,呵呵,不知道有没有完整的例子参考下,谢谢了。
2 楼 andrew.yulong 2008-07-23  
只是做个验证
如果上传图片你传个txt文件的话struts2会返回一个json提示你类型不匹配
  其实这点不是狠好,还是经过了服务器,希望大家可以提意见改进
  还有,我博客都是从csdn搬过来的,可能有些地方有问题,大家都提出来
1 楼 lu_pp 2008-07-22  
不错,有点问题想问问
客户端的文件上传类型设了有什么用?

相关推荐

    extjs 多文件上传控件

    在ExtJS中,多文件上传控件是开发人员常用的一种功能,用于在网页上实现批量上传多个文件。这种控件允许用户一次性选择并上传多个文件,极大地提升了用户体验。 在ExtJS中实现多文件上传,主要涉及到以下几个关键...

    批量上传文件 EXTJS文件上传 上传组件

    EXTJS是一种基于JavaScript的前端框架,它提供了丰富的用户界面组件,包括用于文件上传的组件。在EXTJS中,实现批量上传文件是一项常见的需求,尤其在处理大量数据或媒体文件时。EXTJS的文件上传组件提供了方便的...

    EXtjs 图片批量上传

    本教程将深入探讨如何在ExtJS中实现图片的批量上传功能,以及与之相关的批量删除操作。 首先,批量上传图片的核心是利用HTML5的File API,它允许用户在不离开当前页面的情况下读取、处理和上传本地文件。在ExtJS中...

    ExtJS原生多文件拖动上传组件

    ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...

    EXTJS3.0多文件上传组件

    综上所述,EXTJS3.0多文件上传组件结合了EXTJS的组件化开发优势和SWFUpload的多文件上传功能,为开发者提供了一个高效且易于定制的文件上传解决方案。通过深入理解和掌握相关知识点,可以开发出满足不同需求的多文件...

    extjs5.1多文件上传控件

    标题中的“ExtJS5.1多文件上传控件”指的是在Web应用中使用ExtJS框架的一个功能组件,它允许用户一次选择并上传多个文件。ExtJS是一个强大的JavaScript库,专门用于构建富客户端的桌面级Web应用程序。在版本5.1中,...

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

    本篇文章将详细介绍如何针对ExtJS 3.x版本定制和优化一个名为`UploadDialog`的多文件上传组件。 #### 关键技术点 1. **ExtJS 3.x兼容性** - 在ExtJS 2.x版本中实现的多文件上传功能通常无法直接应用于3.x版本。 ...

    EXTJS 多文件上传

    在EXTJS中,`MultiFileUploadField` 是一个组件,它允许用户在单个操作中选择并上传多个文件,极大地提升了用户交互体验。这个功能对于处理大量文件上传的场景非常有用,比如在内容管理系统、图像库或者文件分享平台...

    extjs 4.2 多文件上传

    用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,

    extjs多文件上传

    在多文件上传场景下,ExtJS提供了一个名为`Ext.form.field.File`的组件,它是用来创建文件输入字段的。默认情况下,这个组件只支持单文件上传,但通过扩展和定制,可以实现多文件上传的功能。 1. **实现多文件上传*...

    extjs 多文件上传

    一、ExtJS 文件上传组件 在ExtJS中,我们可以使用`Ext.form.FileField`(又称FileInputField)来创建一个文件选择器,用于用户选择待上传的文件。这个组件提供了基本的文件选择功能,但并不包括实际的上传逻辑。因此...

    ExtJS 使用Flash上传

    在ExtJS中,我们可以创建一个自定义的组件,该组件利用Flash来处理文件上传。关键在于集成`SWFObject.js`库,这是一个轻量级的JavaScript库,用于嵌入和操作Flash对象。`SWFObject.js`允许我们在HTML页面中无缝地...

    EXTJS 上传组件及示例

    在EXTJS 中,上传组件是用于实现文件上传功能的关键部分,这对于创建交互性强、用户体验良好的Web应用程序至关重要。本篇文章将详细解析EXTJS中的上传组件及其示例,帮助开发者更好地理解和使用这一功能。 EXTJS 的...

    extjs 3.x upload上传组件

    ExtJS 3.x Upload上传组件是基于ExtJS 3.x版本的一个功能强大的文件上传工具,它为Web应用程序提供了用户友好的界面和灵活的文件管理功能。这个组件在Web开发中非常实用,尤其对于需要处理大量文件上传的项目,如...

    ExtJs:收集基于ExtJs扩展的一些控件

    这个文件可能是对一些自定义或第三方开发的ExtJs控件的概述,它可能包括了各种特定用途的组件,如日历控件、拖放功能、树形视图、图表插件等。这些控件通常是为了满足特定项目需求或者优化原有组件性能而创建的。...

    Extjs4文件上传,后台struts2

    首先,让我们从ExtJS 4的文件上传组件开始。`Ext.form.Basic`是ExtJS中处理表单的核心类,它包含了一个`fileField`组件,用于选择本地文件。创建一个包含`fileField`的表单,你需要定义以下配置: ```javascript ...

    ExtJS4多文件上传,带进度条及管理

    1. **创建uploadPanel**:在ExtJS4中定义一个面板,包含文件选择输入框、上传按钮和其他控件。 2. **集成swfupload**:引入swfupload库,配置相关参数,如文件类型、最大上传大小等。 3. **事件监听**:设置事件监听...

    ExtJs4 多附件上传组件

    在ExtJS4中实现多附件上传功能,我们可以利用其丰富的组件系统和自定义组件的能力。这篇博客文章(链接已提供)应该详细介绍了如何创建一个自定义的上传面板组件。 在ExtJS中,组件是构建用户界面的基本单元,它们...

    extjs struts2 多图片批量上传控件

    在本场景中,"extjs struts2 多图片批量上传控件"是一个集成解决方案,允许用户通过ExtJS前端框架批量上传多张图片,并通过Struts2后端框架进行处理。 **ExtJS** 是一个基于JavaScript的UI库,它提供了丰富的组件和...

    ExtJS验证上传文件类型

    在 ExtJS 中,我们可以使用 field 组件的 validator 验证器来验证文件类型。Validator 是 filefield 的一个配置项,它的值是一个 function,该函数有唯一的参数 value(文本框中的值),函数体中对这个 value 进行...

Global site tag (gtag.js) - Google Analytics