- 浏览: 437636 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
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 38129今天在STS下面启动项目的时候,Spring报如下错: ... -
JTextArea自动滚动到最低端
2012-07-19 13:41 1137…… jScrollPane = new JScrol ... -
网站代码完成,正式上线使用,纪念一下
2012-03-03 20:58 1424朋友他爹的公司,公司成立不久,网站我一个人业余时间胡乱写的,完 ... -
IP地址查询接口收集
2011-12-28 21:03 3138新浪 IP 地址查询接口:http://counter.sin ... -
Maven+Struts2+MyBatis+Spring搭建教程
2011-12-20 18:22 28251教程目标: 在MyEclipse中搭建Struts2+My ... -
C3P0 配置详细说明
2011-12-19 18:41 1227<c3p0-config><default- ... -
Flex Builder 4.5 正式版eclipse插件利用BlazeDS于java交互实例
2011-11-09 22:24 3265Flash Builder 4.5的插件好像跟3在细节上有点不 ... -
Java 发送邮件
2011-06-24 16:36 1437/** * 邮件工具 */ package t ... -
JVM调优总结
2011-05-25 17:30 1034堆大小设置JVM 中最大堆大小有三方面限制:相关操作 ... -
java调用shell
2011-05-09 12:34 1845转自:http://www.cnblogs.com/Sea ... -
如何使用Log4j?
2011-01-04 16:32 10041、 Log4j是什么? Log4j ... -
根据表信息生成JavaVO
2010-11-02 10:54 3052例子采用MySQL数据库 代码: package c ... -
html表格导出Excel
2010-09-19 23:37 4120<table id="export_table ... -
BBS论坛系统
2010-09-07 23:45 1974今天上班的时候,有位陌生朋友跟我聊天,问我可有BBS论坛的源码 ... -
java socket 多线程实例
2010-07-26 09:06 6176题: 做一个简单的网络控制软件,分为Server端和Cli ... -
jquery uploadify插件多文件上传
2010-06-01 13:07 128871效果图: 1、jqu ... -
BufferedReader 和BufferedWriter 实例
2010-05-23 12:57 3440/** * 文件处理工具类 * @author sam ... -
Servlet 中java路径的直观表示
2010-05-12 14:20 1781路径的参考项 1、工程名:jxdBlog 2、Eclipse工 ... -
Java 写注册表
2010-05-09 01:36 2307这里介绍的是利用registry向windows系统写注册表的 ...
相关推荐
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.UploadDialog这个强大的东西,实现了一下
Ext.ux.tree.treegrid异步加载,点击节点加载数据
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