首先看一下效果:
1.下载相应的UploadDialog组件,我用的是ext3.0,在网上下了UploadDialog for ext.3.2.1,附件中有。
2.在编码时需要导入两个文件
<link rel="stylesheet" type="text/css"href="extjs存放路径/UploadDialog/css/Ext.ux.UploadDialog.css">
<script type="text/javascript"src="extjs存放路径/UploadDialog/Ext.ux.UploadDialog.packed.js">
</script>
3.组件的使用
var dialog = new Ext.ux.UploadDialog.Dialog( {
autoCreate : true,
closable : true,
collapsible : false,
draggable : true,
minWidth : 500,
minHeight : 200,
width : 400,
height : 350,
proxyDrag : true,
resizable : true,
permitted_extensions : ['JPG', 'jpg', 'jpeg', 'JPEG', 'GIF', 'gif','doc','xls'],
constraintoviewport : true,
title : '文件上传的例子',
url : "fileUploadServlet",
reset_on_hide : false,
allow_close_on_upload : true
});
//定义上传文件的按钮
var btnShow = new Ext.Button({
text:'上传文件',
listeners:{
click:function(btnThis,eventobj){
dialog.show();
} } });
4.后台采用common-upload组件实现上传,代码如下:
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
String fileName = "";
try { List items = upload.parseRequest(request);
// 上传文件解析
Iterator itr = items.iterator();
// 枚举方法
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
// 判断是文件还是文本信息
if (item.isFormField()) {
//返回上传结果
result = "{'success':true,'fileName':'"+fileName+"','message':'success!'}";
} else {
// 判断是否选择了文件
if (item.getName() != null && !item.getName().equals("")) {
// 此时文件暂存在服务器的内存当中
File tempFile = new File(item.getName());
//在D盘下创建upload文件夹,这里可以根据项目要求修改存放路径
File file = new File("D:\\upload", tempFile.getName());
//保存文件在服务器的物理磁盘中
item.write(file);
fileName = item.getName();
result = "{'success':true,'message':'success!'}";// 返回上传结果
} else {
result = "{'failure':true,'message':'failure!'}";
}
}
}
} catch (Exception e) {
e.printStackTrace();
result = "{'success':false,'message':'failure!'}";
}
注意点:
1.在使用此方法进行文件上传时,其后台往页面的返回值类型是这样的: 如果没有success:true,无论上传成功与否,显示的都是上传失败,同时上传中出现下载的页面也是这个问题引起的, 其实这个和form.submit()的提交方式是一个道理。
2.我在上传成功后,Filename不显示,不知道是什么原因,通过不断尝试,解决方法: 在返回json数据时加了fileName参数,{'success':true,'fileName':'"+fileName+"','message':'success!'}
- 大小: 16.9 KB
- 大小: 18.5 KB
分享到:
相关推荐
The class is ready for i18n, override the Ext.ux.UploadDialog.Dialog.prototype.i18n object with your language strings, or just pass i18n object in config. Server side handler. The files in the queue...
ext.ux.uploadDialog实例
在做文件上传的时候,发现了Ext.ux.UploadDialog这个强大的东西,实现了一下
工程文件 博文链接:https://mutongwu.iteye.com/blog/693692
Sencha Ext JS的文件上传小部件 ... 'Ext.ux.upload' : '/my/path/to/extjs-upload-widget/lib/upload' }); 基本用法 在最简单的情况下,您只需打开对话框并传递uploadUrl参数: var dialog = Ext.create('Ext.ux.up
dialog-1.1-9.20080819.1.el6.i686.rpm
Ext.ux.dialog Common-fileupload 整合版! <br>Ext文件上传完整包
Open the Diver Manager dialog ("Tools" > "Driver Manager...") and hit the "Create a new driver" icon. Fill in the information as seen below. For the "Driver File Paths" you are pointing to hive-jdbc-...
【IT十八掌徐培成】Java基础第17天-02.GUI编程-editor-dialog.zip
EasyExt_003_第一个组件Ext.Window EasyExt_003_第一个组件Ext.Window
官方离线安装包,测试可用。使用rpm -ivh [rpm完整包名] 进行安装
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽
dialog-1.1-10.20080819.el6.x86_64.rpm,用于CentOS 6.10 系统或者RedHat 6.X 系统 for x86_64使用
官方离线安装包,测试可用。使用rpm -ivh [rpm完整包名] 进行安装
官方离线安装包,亲测可用。使用rpm -ivh [rpm完整包名] 进行安装
本实例参考了其他人的例子,并对alert弹框做了改进,调整位置居中 具体修改: bootstrap.min.css:....bootstrap-dialog.min.css:.bootstrap-dialog .bootstrap-dialog-message{font-size:14px;text-align: center;}
近几天大家反映的问题,都会得到改善,请及时使用最新版本。模块导航:SmartToastSmartSnackbarSmartTopBarSmartDialog关于实现关于作者及微信交流群引入该库功能总览:优雅封装,简化调用处理系统bug等,如Android ...
项目通用Dialog.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
前端项目-dialog-polyfill,Polyfill for the dialog element