先引用js和css
<link type="text/css" rel="stylesheet" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
然后复写样式表:
<style type="text/css">
.tabs {
background-image:url("../desktop/images/tabs.gif") !important;
}
.ux-lovcombo-icon {
width:16px;
height:16px;
float:left;
background-position: -1px -1px ! important;
background-repeat:no-repeat ! important;
}
.ux-lovcombo-icon-checked {
background: transparent url(../ext/resources/images/default/menu/checked.gif);
}
.ux-lovcombo-icon-unchecked {
background: transparent url(../ext/resources/images/default/menu/unchecked.gif);
}
</style>
然后写ext脚本引用弹出窗口
<script type="text/javascript">
var i = 0;
var currentField;
//上传form
var uploadForm = new Ext.form.FormPanel({
baseCls : 'x-plain',
labelWidth : 80,
// layout:'fit',
autoHeight:true,
style:'margin-top:10',
frame : true,
disabledClass : "x-item-disabled",
tbar : [{
xtype : 'button',
text : '添加上传',
labelAlign : 'right',
icon : "image/add_16.gif",
handler : function() {
var uf = getUploadField();
uploadForm.add(uf);
uploadForm.doLayout(true);
upload_win.setHeight(upload_win.getHeight() + 47);
}
}, {
xtype : 'label',
text : '(单个最大允许上传50M)'
}],
//url : '',//__jadPath + '/sm/fileUploadAction!fileUpLoad.action',
fileUpload : true,
defaultType : 'textfield',
items : [getUploadField()]
});
//alert(__jadPath);
function getUploadField(callFun) {//增加一行文件框
var fileName = "文件 " + (++i) + " : ";
var uploadFileTf = new Ext.form.TextField({
xtype : 'textfield',
columnWidth : .7,
name : 'file',
inputType : 'file',
allowBlank : false,
blankText : '请选择上传文件',
anchor : '90%'
});
var lbl = new Ext.form.Label({
text : fileName,
columnWidth : .15,
style : 'font-weight:bold;vertical-align: middle'
});
var fieldSet = new Ext.form.FieldSet({
layout : 'column',
border : false
});
fieldSet.add(lbl);
fieldSet.add(uploadFileTf);
if (i != 1) {
var deleteBtn = new Ext.Button({
text : '删除',
icon : "image/remove.png",
columnWidth : .15,
handler : function() {
fieldSet.destroy();
upload_win.setHeight(upload_win.getHeight() - 37);
uploadForm.doLayout(true);
}
});
fieldSet.add(deleteBtn);
}
return fieldSet;
}
var upload_win = new Ext.Window({
title: '文件上传',
width: 500,
layout: 'fit',
plain: true,
bodyStyle : 'padding:5px;',
buttonAlign : 'center',
items: uploadForm,
resizable : false,
closeAction : 'close',
iconCls: 'tabs',
loadMask : true,
autoHeight: true,
height:160,
buttons : [{
text : '开始上传',
icon : "image/upload.png",
handler : function() {
if (uploadForm.form.isValid()) {
Ext.MessageBox.show({
title : 'Please wait',
msg : '上传中...',
progressText : '- - - -上传中- - - -',
width : 300,
progress : true,
closable : false,
animEl : 'loding'
});
uploadForm.getForm().submit({
url : '/uploadFileAttach.action',
success : function(form, action) {
var result = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('信息提示', result.message);
var fn = callFunc.createCallback(result);
fn();
upload_win.hide();
},
failure : function() {
Ext.Msg.alert('信息提示', '文件上传失败');
upload_win.show();
}
})
}
}
}, {
text : '关闭',
icon : "image/btn-cancel.png",
handler : function() {
upload_win.hide();
}
}]
});
upload_win.show();
</script>
后台Java处理代码:
/**
* 文件上传
* @return
*/
public String upload() {
File uploadFileDir = new File(ServletActionContext.getServletContext().getRealPath(Constants.FILE_ATTACH_PATH+"/"+fileType));
if (!uploadFileDir.exists())
uploadFileDir.mkdirs();
SimpleDateFormat sdFormat = new SimpleDateFormat("yyyyMMddhhmmssSSS");
int i = 0;
List<FileAttach> listFile = new ArrayList<FileAttach>();
for (File fileItem : file) {
// 原文件名
String oldFileName = fileFileName.get(i++);
// 新文件名
String newFileName = sdFormat.format(new Date()) + i;
// 文件后缀
String suffix = null;
int index = oldFileName.lastIndexOf('.');
if (-1 != index) {
suffix = oldFileName.substring(index + 1, oldFileName.length());
newFileName += "." + suffix;
}
InputStream bis = null;
OutputStream bos = null;
try {
FileInputStream fs = new FileInputStream(fileItem);
bis = new BufferedInputStream(fs);
bos = new BufferedOutputStream(new FileOutputStream(new File(
uploadFileDir, newFileName)));
byte[] buf = new byte[4096];
int len = -1;
while ((len = bis.read(buf)) != -1) {
bos.write(buf, 0, len);
}
bos.flush();
} catch (Exception e) {
outJson("{success:false,message:'文件上传失败'}");
e.printStackTrace();
return null;
} finally {
try {
if (null != bos)
bos.close();
if (null != bis)
bis.close();
} catch (IOException e) {
e.printStackTrace();
}
}
FileAttach file = file = new FileAttach();
file.setCreateDate(new Date());
file.setCreator("UNKown");
file.setExt(suffix);
file.setFileName(newFileName);
file.setFilePath(Constants.FILE_ATTACH_PATH+"/"+fileType+"/"+newFileName);
file.setFileType(fileType);
file.setNote(" bytes");
listFile.add(file);
}
try{
this.fileAttachService.saveFiles(listFile);
JSONObject jo=new JSONObject();
jo.put("success", true);
jo.put("list", listFile);
jo.put("message", "上传完成!");
outJson(jo.toString());
}catch(Exception e){
outJson("{success:false,message:'文件上传失败'}");
e.printStackTrace();
}
return null;
}
- 大小: 34.2 KB
分享到:
相关推荐
这份"ext学习资料 20篇详细学习笔记 初学者ext学习的文档"是针对EXT初学者的一份宝贵资源,旨在帮助初学者快速入门EXT开发。 EXT的学习通常包括以下几个核心部分: 1. **EXT基础**:首先,你需要了解EXT的基本概念...
在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端的Web应用程序。...如果你正在学习ExtJS,这个简单的例子是一个很好的起点,可以帮助你理解ExtJS在处理文件上传时的核心概念和方法。
标题中的“ext上传文件”可能指的是使用EXTJS(一个JavaScript库)进行文件上传的功能。EXTJS提供了一套完整的用户界面组件,其中包括文件上传组件,它允许用户在Web应用中方便地上传文件。EXTJS通常与后端服务器...
在“Ext3.0实现多文件上传.rar”这个压缩包中,我们聚焦于一个特定的功能:使用Ext3.0来实现实时的多文件上传功能。这个功能通常在网页应用中用于让用户能够一次性上传多个文件,如图片、文档等,极大地提高了用户...
在IT领域,文件上传功能是Web应用中常见且重要的组成部分,尤其在用户需要提交数据、分享文件或进行协作时。...通过学习和研究这些代码,开发者可以更好地理解和掌握Ext与ASP.NET结合实现文件上传的全过程。
总结来说,这些文件覆盖了EXT API的基础到进阶内容,包括EXT库的使用、组件开发、事件处理、多文件上传以及开发工具的使用,是全面学习EXT和SWFUpload的宝贵资源。通过深入学习和实践,开发者可以构建出功能强大、...
EXT是一个流行的JavaScript库,主要用于构建富客户端应用程序,而EXT上传组件是EXT库的一个扩展,它使得在EXT应用中集成文件上传变得更加简单。 SwfUploadPanel.css、SwfUpload.js以及SwfUploadPanel.js是EXT上传...
Ext学习PDF,前端开发脚本语言,相比JQUUERY,Ext有其自己特点。
在其之上实现的多文件上传功能,是网络应用中一项提升效率和用户满意度的重要技术,尤其是在需要处理大量文件交换的场景中。下面,我们将结合ext4.0文件系统的特性以及多文件上传技术的实现,全面深入地探讨这个主题...
Ext 文件上传参考文档主要涉及的是在Web开发中处理文件上传的场景,特别是使用ExtJS框架进行前端交互。ExtJS是一个强大的JavaScript库,用于构建复杂的、数据驱动的Web应用程序。文件上传是用户界面中的常见功能,...
在IT领域,“ext”通常与Linux文件系统有关,比如ext2、ext3、ext4等,但根据提供的链接和上下文,这里的“ext”更可能指的是Ext JS,一个广泛应用于Web开发中的开源JavaScript库,用于构建复杂且高性能的Web应用...
"Ext2.0 文件上传组件"是一个用于Web应用程序的组件,它允许用户在浏览器中方便地上传文件。这个组件基于Ext JavaScript库的2.0版本,Ext是一个强大的前端开发框架,提供了丰富的用户界面组件和数据管理功能。在本文...
学习这个示例,开发者可以了解如何在自己的应用程序中集成文件上传功能,包括如何创建用户友好的界面,如何处理用户选择的文件,以及如何实现与服务器的通信。记住,由于跨域限制,实际的文件上传通常需要服务器端的...
《gwtext学习三部曲》是一份专为GWT初学者设计的教程资源,它涵盖了gwtext和GWT Ext的相关知识。gwtext是Google Web Toolkit (GWT) 的一个扩展库,提供了丰富的用户界面组件和样式,使得在GWT平台上构建复杂的Web...
EXT文件批量上传源代码是一种基于EXT JavaScript库实现的前端文件上传解决方案。EXT是一个强大的富客户端JavaScript框架,它提供了丰富的组件库,用于构建交互性强、功能丰富的Web应用。EXT的文件批量上传功能允许...
通过学习这些知识点,开发者可以更好地理解和使用EXTJS实现文件上传功能,提高用户体验并确保上传过程的稳定性和可靠性。对于实际项目开发来说,这是一项至关重要的技能,特别是对于那些需要处理大量用户生成内容的...
在Web开发中,文件上传是一项常见的功能,尤其在企业级应用和社交网络中更是不可或缺。ExtJS是一个强大的JavaScript库,提供了丰富的组件和功能,其中包括文件上传。本示例将详细介绍如何在ExtJS环境中实现文件上传...
EXT文件上传Demo是一个基于EXT库实现的交互式...通过研究EXT文件上传Demo,开发者可以学习到如何使用EXT构建动态、交互的文件上传界面,以及如何与服务器进行异步通信。这有助于提高Web应用的用户体验和功能完整性。
首先,EXTJS中的`Ext.form.Panel`组件是实现多文件上传的基础。我们需要创建一个包含`Ext.form.FileField`的表单,这是EXTJS中用于处理文件输入的组件。在`FileField`中,我们可以通过设置`multiple`属性为`true`来...