1、先看看效果:
接下来详细说说怎么用它:java实现
2、需要的组件:Ext.ux.UploadDialog.js
官网下载地址:http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php
下载解压后把整个的拷到web工程下面,例如我放在:WebRoot/comm/extjs/UploadDialog下面
3、接下来在你的jsp里面引入需要的文件:
<link rel="stylesheet" type="text/css" href="comm/extjs/UploadDialog/css/Ext.ux.UploadDialog.css" />
<script type="text/javascript" src="comm/extjs/UploadDialog/Ext.ux.UploadDialog.js"></script>
<script type="text/javascript" src="comm/extjs/UploadDialog/locale/ru.utf-8_zh.js"></script>
其中上面引入的第三个js文件是我改过了的,用来做汉化的,包里面自己带的文件叫 ru.utf-8.js ;
这里也把这个文件贴上上来把,可以直接copy它:
//ru.utf-8_zh.js
Ext.apply(
Ext.ux.UploadDialog.Dialog.prototype.i18n,
{
title: '上传头像',
state_col_title: '状态',
state_col_width: 70,
filename_col_title: '文件名',
filename_col_width: 230,
note_col_title: '备注',
note_col_width: 150,
add_btn_text: '添加',
add_btn_tip: '添加文件到上传列表',
remove_btn_text: '删除',
remove_btn_tip: '从上传列表中上传文件',
reset_btn_text: '重置',
reset_btn_tip: '重置文件上传列表',
upload_btn_start_text: '开始上传',
upload_btn_stop_text: '停止上传',
upload_btn_start_tip: '开始上传',
upload_btn_stop_tip: '停止上传',
close_btn_text: '关闭',
close_btn_tip: '关闭上传窗口',
progress_waiting_text: '等待……',
progress_uploading_text: '正在上传: {0} / {1} 上传成功',
error_msgbox_title: '错误信息',
permitted_extensions_join_str: ',',
err_file_type_not_permitted: '错误的文件类型: {1}',
note_queued_to_upload: '等待上传',
note_processing: '上传中……',
note_upload_failed: '上传失败',
note_upload_success: '上传成功',
note_upload_error: '上传出错',
note_aborted: '忽略',
note_canceled: '取消'
}
);
4、jsp里面调用
jsp:
<html>
<head>
</head>
<body>
<img id="upload_image_btn" src="/bbs/images/upload_image.png" style="cursor: pointer;">
</body>
</html>
js:
//创建上传组件
$('#upload_image_btn').click(function()
{
dialog = new Ext.ux.UploadDialog.Dialog({
title: '上传头像' ,
url:'system/upload-uploadImage.action' , //这里我用struts2做后台处理
post_var_name:'uploadFiles',//这里是自己定义的,默认的名字叫file
width : 450,
height : 300,
minWidth : 450,
minHeight : 300,
draggable : true ,
resizable : true ,
//autoCreate: true,
constraintoviewport: true ,
permitted_extensions:[ 'JPG' , 'jpg' , 'jpeg' , 'JPEG' , 'GIF' , 'gif' , 'png' , 'PNG' ],
modal: true ,
reset_on_hide: false ,
allow_close_on_upload: false , //关闭上传窗口是否仍然上传文件
// upload_autostart: true //是否自动上传文件
upload_autostart: false
});
dialog.show(); //'show-button'
dialog.on( 'uploadsuccess' , onUploadSuccess); //定义上传成功回调函数
dialog.on( 'uploadfailed' , onUploadFailed); //定义上传失败回调函数
dialog.on( 'uploaderror' , onUploadFailed); //定义上传出错回调函数
dialog.on( 'uploadcomplete' , onUploadComplete); //定义上传完成回调函数
});
//文件上传成功后的回调函数
onUploadSuccess = function(dialog, filename, resp_data, record){
alert(resp_data.data);//resp_data是json格式的数据
}
//文件上传失败后的回调函数
onUploadFailed = function(dialog, filename, resp_data, record){
alert(resp_data.data);
}
//文件上传完成后的回调函数
onUploadComplete = function(dialog){
alert('所有文件上传完成');
// dialog.hide();
}
说明:
这里多文件上传其实不是一次性把多个文件传到后台,其实也是一次一个文件,只不过它把这个过程连续起来进行了而已,所以上面的那个//文件上传成功后的回调函数//执行的次数是跟上传的文件数目相同的;而//文件上传完成后的回调函数//是当列表中所有的都完成后执行一次
5、java后台部分
后台得到文件的时候,要根据前面定义的 post_var_name来取文件,NND,这个百度空间发文章太累了,
相关推荐
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...
EXTjs的上传组件
Ext.ux.UploadDialog批量上传文件应用,后台采用com.jspsmart.upload.SmartUpload。myeclipse工程,导入即可运行。
ext.ux.uploadDialog实例
Ext.ux.tree.treegrid异步加载,点击节点加载数据
在做文件上传的时候,发现了Ext.ux.UploadDialog这个强大的东西,实现了一下
NULL 博文链接:https://canfly2010.iteye.com/blog/545673
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
Ext.ux.UploadDialog下载,其中i18n的中文我写了一个js方便大家不想自己写的人调用,路径是:UploadDialog/locale/zh_CN.utf-8.js
基于Ext Core的包含校验功能的表单提交扩展Ext.ux.submit
Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing ...
Ext.ux.UploadDialog extjs上传文件的组件,免费下载
[Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree
Ext 批量上传附件 组件 。可用 很好 很强大 我已在实际项目中使用过 没有问题。
Ext+SwfUpload做的一个多文件上传的插件.
带复选框的这是经过测试可以用的下拉树
工程文件 博文链接:https://mutongwu.iteye.com/blog/693692