//*****************************************上传的公共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的代码
<PRE class=java name="code">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;
}
}
</PRE>

- 大小: 58.5 KB
分享到:
相关推荐
一个Ext的上传文件的控件。修改过的源码。能上传中文文件。
"Ext2.0 文件上传组件"是一个用于Web应用程序的组件,它允许用户在浏览器中方便地上传文件。这个组件基于Ext JavaScript库的2.0版本,Ext是一个强大的前端开发框架,提供了丰富的用户界面组件和数据管理功能。在本文...
EXT上传组件是一款基于Flash技术的前端文件上传工具,它提供了多文件上传的功能,极大地提升了用户在上传文件时的体验和效率。EXT是一个流行的JavaScript库,主要用于构建富客户端应用程序,而EXT上传组件是EXT库的...
在给定的"Ext上传文件控件"中,我们关注的是ExtJS如何处理文件上传的功能。ExtJS 提供了一个名为`Ext.form.FileField`(也称为`Ext.form.field.File`)的组件,允许用户在Web表单中选择和上传文件。这个控件通常与`...
标题中的“ext上传文件”可能指的是使用EXTJS(一个JavaScript库)进行文件上传的功能。EXTJS提供了一套完整的用户界面组件,其中包括文件上传组件,它允许用户在Web应用中方便地上传文件。EXTJS通常与后端服务器...
在文件上传场景中,EXT可能使用了`Ext.form.FileField`或`Ext.ux.FileUploadField`组件,这些组件提供了文件选择和上传功能。 2. **文件选择控件**:在EXT中,文件选择通常通过一个隐藏的...
这里我们讨论的是基于Ext3.3和swfupload技术实现的一个批量上传组件。这两个技术都是在Web开发中处理文件上传问题的重要工具。 首先,Ext3.3是一个基于JavaScript的富客户端框架,它提供了丰富的组件库,可以构建出...
2. **Ext FileField**: FileField是Ext中用于文件选择的控件,用户可以通过这个组件选择本地文件。配置FileField时,我们通常会设置`name`属性来标识文件字段,并可以设置`allowBlank`属性控制是否允许用户不选择...
Ext.ux.dialog是ExtJS的一个扩展组件库,它为用户提供了一些额外的对话框(dialog)组件,这些组件超越了ExtJS核心库中提供的基础功能。对话框通常用于显示一些需要用户交互的信息,比如警告、确认或者提供复杂的...
ExtJS是一个强大的JavaScript库,提供了丰富的组件和功能,其中包括文件上传。本示例将详细介绍如何在ExtJS环境中实现文件上传功能,以帮助开发者更好地理解和应用。 首先,我们需要了解ExtJS中的FileField组件。...
在EXT中,处理图片上传并实现预览功能是一项常见的需求,尤其在用户交互丰富的应用中,允许用户在正式上传前预览图片,可以提供更好的用户体验。 在EXT中,图片预览通常涉及到以下几个关键知识点: 1. **File ...
通过这个视频教程,初学者不仅可以掌握EXT Grid的基本用法,还能深入理解EXT控件的内部工作原理,以及如何处理服务器与客户端的数据交互。同时,实践源代码的分析和调试将有助于加深理论知识的理解,提升实际开发...
Ext的核心特性在于其丰富的用户界面组件和灵活的页面布局机制,允许开发者创建具有专业外观和功能的Web应用。 首先,让我们来理解一下什么是Ext。Ext是一个用JavaScript编写的前端框架,不依赖任何特定的后端技术,...
1. **EXT组件**:EXT库中的Grid、FormPanel、FileInput等组件是实现批量上传的关键。Grid用于展示已选择的文件列表,FormPanel用于封装表单数据,FileInput则作为文件选择控件。 2. **AJAX异步上传**:EXT利用...
3. **上传组件(Uploader)**:ExtJS提供了一些扩展或第三方组件,如`Ext.ux.UploadPanel`,来简化多文件上传的处理。这些组件通常会结合Flash技术(如SWFUpload)来处理文件选取和上传的实际操作,因为JavaScript在...
在IT行业中,文件上传和下载是常见的功能,尤其...综上所述,`Ext`文件上传和下载涉及到`Ext`组件的使用、Ajax技术、文件处理、以及后端配合等多个方面,需要综合运用前端和后端的知识来实现高效、安全的文件操作功能。
在本案例中,"ext图片批量上传源码"指的是使用EXT库实现的一种用户界面组件,允许用户批量上传图片文件。EXT.ux.UploadDialog是EXT扩展库中的一个插件,它提供了一种对话框式的界面,用于处理文件上传,特别是图片...
本文将深入探讨“ext多文件上传控件Ext.ux.UploadDialog”的使用方法及其常见问题。该控件作为ExtJS库的一个扩展,为用户提供了一种方便的多文件选择和上传的界面。 首先,Ext.ux.UploadDialog是一个基于ExtJS框架...
这些可以通过配置`Ext.form.FileField`的属性或扩展上传组件来实现。例如,`allowBlank`属性控制是否允许选择空文件,`maxLength`限制文件大小,`accept`则可以指定可接受的文件类型。 总结一下,"Ext上传文件例子...
6. **UI组件**: Ext3.0库包含了各种UI组件,如按钮、表单、面板等,可以方便地构建出美观且功能完善的文件选择和上传界面。例如,可以使用`Ext.form.FileField`组件来创建一个文件选择按钮,并通过配置属性实现多选...