- 浏览: 444789 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
litainiu:
点亮了,感谢
Maven+Struts2+MyBatis+Spring搭建教程 -
y413059495:
对了 部署完跑起来了 完美!
Maven+Struts2+MyBatis+Spring搭建教程 -
springaop_springmvc:
可以参考最新的文档:如何在eclipse jee中检出项目并转 ...
Maven+Struts2+MyBatis+Spring搭建教程 -
郑智睿:
把这句去掉,你就挂了<!DOCTYPE configur ...
Maven+Struts2+MyBatis+Spring搭建教程 -
zlfzml:
不行,没什么用
jquery uploadify插件多文件上传
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" mce_src="bbs/images/upload_image.png" style="cursor: pointer;" mce_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来取文件,
public class UploadAction extends BaseActionSupport {
private static final long serialVersionUID = 4795147622620740907L;
/**
* UserService引用
*/
private UserService service;
private File[] uploadFiles;
private String[] uploadFileNames;
private String[] uploadContentTypes;
public File[] getUploadFiles() {
return uploadFiles;
}
public void setUploadFiles(File[] uploadFiles) {
this.uploadFiles = uploadFiles;
}
public String[] getUploadFileNames() {
return uploadFileNames;
}
public void setUploadFileNames(String[] uploadFileNames) {
this.uploadFileNames = uploadFileNames;
}
public String[] getUploadContentTypes() {
return uploadContentTypes;
}
public void setUploadContentTypes(String[] uploadContentTypes) {
this.uploadContentTypes = uploadContentTypes;
}
/**
* 上传照片
*/
public void uploadImage() {
LogUtil.info("上传用户头像开始");
UserVO tempVO = (UserVO) session.getAttribute(Constants.USER_KEY);
if(tempVO!=null){
// 图片上传后存放的路径目录
String fileBasePath = session.getServletContext().getRealPath("/");
File images = new File(fileBasePath+"/images/user_images/"+tempVO.getId()+"/");
if(!images.exists()){
images.mkdirs();
}
BufferedInputStream bis = null;
BufferedOutputStream bos = null;
for(int i = 0,size = uploadFiles.length;i<size;i++){
File file = uploadFiles[i];
try {
bis = new BufferedInputStream(new FileInputStream(file));
String imageName = tempVO.getId()+new Date().getTime()+".png";
//
bos = new BufferedOutputStream(
new FileOutputStream(new File(images.getPath()+"/"+imageName)));
Streams.copy(bis, bos, true);
writeJson("images/user_images/"+tempVO.getId()+"/"+imageName,true);
} catch (Exception e) {
writeJson("上传失败:系统发生错误,请与管理员联系", false);
e.printStackTrace();
}
}
}else{
writeJson("上传失败:您已经退出了登录", false);
}
isInvalid();
LogUtil.info("上传用户头像结束");
}
/**
* 取得service引用
* @return
*/
public UserService getService() {
return service;
}
/**
* 设置service引用
*
* @param service
*/
public void setService(UserService service) {
this.service = service;
}
}
评论

swfupload.swf 就支持多选,但会出现轮询超时,无法上传。
发表评论
-
Spring报cvc-complex-type.2.3: Element 'bean' cannot have character [children]
2012-09-26 14:11 38270今天在STS下面启动项目的时候,Spring报如下错: ... -
JTextArea自动滚动到最低端
2012-07-19 13:41 1207…… jScrollPane = new JScrol ... -
网站代码完成,正式上线使用,纪念一下
2012-03-03 20:58 1502朋友他爹的公司,公司成立不久,网站我一个人业余时间胡乱写的,完 ... -
IP地址查询接口收集
2011-12-28 21:03 3223新浪 IP 地址查询接口:http://counter.sin ... -
Maven+Struts2+MyBatis+Spring搭建教程
2011-12-20 18:22 28340教程目标: 在MyEclipse中搭建Struts2+My ... -
C3P0 配置详细说明
2011-12-19 18:41 1300<c3p0-config><default- ... -
Flex Builder 4.5 正式版eclipse插件利用BlazeDS于java交互实例
2011-11-09 22:24 3333Flash Builder 4.5的插件好像跟3在细节上有点不 ... -
Java 发送邮件
2011-06-24 16:36 1508/** * 邮件工具 */ package t ... -
JVM调优总结
2011-05-25 17:30 1165堆大小设置JVM 中最大堆大小有三方面限制:相关操作 ... -
java调用shell
2011-05-09 12:34 1914转自:http://www.cnblogs.com/Sea ... -
如何使用Log4j?
2011-01-04 16:32 10651、 Log4j是什么? Log4j ... -
根据表信息生成JavaVO
2010-11-02 10:54 3222例子采用MySQL数据库 代码: package c ... -
html表格导出Excel
2010-09-19 23:37 4251<table id="export_table ... -
BBS论坛系统
2010-09-07 23:45 2047今天上班的时候,有位陌生朋友跟我聊天,问我可有BBS论坛的源码 ... -
java socket 多线程实例
2010-07-26 09:06 6288题: 做一个简单的网络控制软件,分为Server端和Cli ... -
jquery uploadify插件多文件上传
2010-06-01 13:07 129048效果图: 1、jqu ... -
BufferedReader 和BufferedWriter 实例
2010-05-23 12:57 3531/** * 文件处理工具类 * @author sam ... -
Servlet 中java路径的直观表示
2010-05-12 14:20 1859路径的参考项 1、工程名:jxdBlog 2、Eclipse工 ... -
Java 写注册表
2010-05-09 01:36 2374这里介绍的是利用registry向windows系统写注册表的 ...
相关推荐
本文将深入探讨“ext多文件上传控件Ext.ux.UploadDialog”的使用方法及其常见问题。该控件作为ExtJS库的一个扩展,为用户提供了一种方便的多文件选择和上传的界面。 首先,Ext.ux.UploadDialog是一个基于ExtJS框架...
Ext.ux.UploadDialog是Ext JS库的一个扩展组件,主要用于实现用户友好的文件上传对话框。这个组件在Web应用中非常实用,特别是在需要处理大量文件上传或者需要用户交互确认的场景下。下面我们将深入探讨`ext.ux....
Ext.ux.UploadDialog是Ext 2.0框架中的一个扩展组件,主要用于实现用户友好的文件上传功能。在Web开发中,文件上传是一个常见的需求,而ExtJS作为一个强大的JavaScript库,提供了丰富的组件和功能来帮助开发者构建...
总之,`Ext.ux.UploadDialog`是一个强大且易于使用的文件上传解决方案,它结合了ExtJS的灵活性和易用性,为开发者提供了构建高效、用户友好的文件上传功能。无论是在企业级应用还是个人项目中,它都是一个值得考虑的...
6. **异步上传**:通常采用Ajax方式进行异步上传,这样在上传过程中用户仍可继续使用应用的其他功能,而不会阻塞界面。 7. **事件监听**:通过监听各种上传事件(如开始上传、文件上传完成、上传失败等),开发者...
- `UploadDialog`是一种用于实现文件上传功能的对话框组件。 - 它支持同时上传多个文件,提高了用户体验。 3. **事件队列(EventQueue)** - `Ext.ux.Utils.EventQueue`类是为了解决异步事件处理问题而设计的。 -...
在本文中,我们将深入探讨如何使用Ext.ux.UploadDialog组件结合FTP(文件传输协议)来实现异步上传功能,这是在ExtJs框架下进行Web应用开发时一个实用的技术点。Ext.ux.UploadDialog是一个第三方扩展,它为ExtJs提供...
它可能利用了HTML5的File API来处理文件选择和上传,同时也可能使用Ajax技术实现异步上传,以保持用户界面的响应性。 在实际应用中,使用"Ext.ux.dialog UploadDialog"可能会涉及以下步骤: 1. **配置和创建对话框...
通常,他们会使用Ext的`Ext.window.Window`类创建对话框,并利用`Ext.form.FileField`或`Ext.ux.upload.Uploader`等组件来实现文件选择和上传功能。此外,可能还需要配置服务器端的接口来接收和处理上传的文件,这...