文档章节

Struts2+Uploadify实现文件上传

一条大河波浪宽
 一条大河波浪宽
发布于 2013/09/28 11:03
字数 865
阅读 2054
收藏 3

Uploadify是一款很不错的多文件上传jQuery插件,可以为你的网站添加多文件上传功能。

其主要特色是:

    1、允许用户一次性选择多个需要上传的文件而无需多次打开文件选择窗口。

    2、支持拖拽上传,Uploadify提供了一个基于Html5的jquery插件UploadiFive,用户可以通过拖动文件到相应的位置,从而将文件加入到上传队列中。

    3、实时显示上传进度。

    4、自定义上传文件类型

    5、强大的自定义功能,用户可以通过修改配置,调整文件上传的各种属性

========================================================

下面是我的实现:

1、前台jsp页面(需要导入相应的jquery和uploadify的js文件)


<body>
  	<input id="uploadify" name="uploadFiles" />
  	<div id="uploadifyQueue"></div>
  </body>
  <script type="text/javascript">
  	$(function(){
  		initUploadify();
  	});
  	function initUploadify(){
  		$('#uploadify').uploadify({
  			"buttonText":"选择文件",
  			"debug":false,
  			"method":"post",
  			"fileObjName":"uploadFiles",// important ,this name should be the same as the name in the action 
  			"queueID":"uploadifyQueue",
  			"swf":"../js/uploadify3.2.1/uploadify.swf",
  			"uploader":"<%=basePath%>file/upload.action",
  			"onUploadSuccess" : function(file, data, response) {
  				console.info(data);
  	        }
  		});
  	}
  </script>
2、后台Action
package com.athena.file.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.List;

import org.apache.log4j.lf5.util.StreamUtils;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;

import com.athena.core.action.BaseAction;

@ParentPackage("default")
@Namespace("/file")
public class FileAction extends BaseAction {

	private static final long serialVersionUID = 8009346171314814735L;
	/*
	 * 下面的uploadFiles有两点需要注意
	 * 1、必须是List数组
	 * 2、命名必须跟jsp页面中的uploadify的一个参数"fileObjName"一致,否则无法获取到上传的文件
	 */
	public List<File> uploadFiles;
	/*
	 *下面的两个属性为使用Action上传文件所必须的,在前台jsp页面无需做任何操作 
	 */
	public List<String> uploadFilesFileName;
	public List<String> uploadFilesContentType;

	@Action("upload")
	public String upload() {
		if (uploadFiles != null) {
			String folder = getSession().getServletContext().getRealPath("/upload");
			for (int i = 0; i < uploadFiles.size(); i++) {
				try {
					StreamUtils.copy(new FileInputStream(uploadFiles.get(i)), new FileOutputStream(new File(folder
							+ File.separator + uploadFilesFileName.get(i))));
					// FileUtils.copyFileToDirectory(uploadFiles.get(i), new
					// File(folder));
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
		}
		printObject(uploadFilesFileName);
		return NONE;
	}

	public List<File> getUploadFiles() {
		return uploadFiles;
	}

	public void setUploadFiles(List<File> uploadFiles) {
		this.uploadFiles = uploadFiles;
	}

	public List<String> getUploadFilesFileName() {
		return uploadFilesFileName;
	}

	public void setUploadFilesFileName(List<String> uploadFilesFileName) {
		this.uploadFilesFileName = uploadFilesFileName;
	}

	public List<String> getUploadFilesContentType() {
		return uploadFilesContentType;
	}

	public void setUploadFilesContentType(List<String> uploadFilesContentType) {
		this.uploadFilesContentType = uploadFilesContentType;
	}

}
有几个需要注意的地方

1、前台jsp页面

(1)需要一个文件上传的input框,其中的name属性值必须和后台的一样:

<input id="uploadify" name="uploadFiles" />
(2)Uploadify的初始化参数中需要添加fileObjName属性,值与后台的也一样
function initUploadify(){
  		$('#uploadify').uploadify({
  			"buttonText":"选择文件",
  			"debug":false,
  			"method":"post",
  			"fileObjName":"uploadFiles",// important ,this name should be the same as the name in the action 
  			"queueID":"uploadifyQueue",
  			"swf":"../js/uploadify3.2.1/uploadify.swf",
  			"uploader":"<%=basePath%>file/upload.action",
  			"onUploadSuccess" : function(file, data, response) {
  				console.info(data);
  	        }
  		});
  	}
2、后台Action

必须使用数组或者List来存放File对象,即使前台只允许上传一个文件,否则会报错

=====================================================================

目前存在的问题:

1、当上传多个文件的时候,虽然后台采用的是List<File>的方式来接收文件,但Uploadify不会一次性提交全部的数据,而是将多个文件分多次分别提交,选择了5个文件上传,那么它就会请求5次action,每次只有一个文件。而每次完成后都会触发uploadify中的onUploadSuccess事件。

2、由上面而导致的结果就是:如果我上传了5个文件,我想把5个文件上传保存到数据库中的记录id获取到,然后拼接成一个字符串赋值给页面中的某个元素,那么我就只能设置一个全局变量,在每次onUploadSuccess触发的时候拼接。而不能一次性获取....



© 著作权归作者所有

一条大河波浪宽
粉丝 115
博文 27
码字总数 42547
作品 0
海淀
CEO
私信 提问
Struts2 这个奇怪的问题怎么解决?

我这用ssh框架做了个上传文件的web应用.上传组件为:struts2+uploadify, 上传完毕后客户端那边获取不到Strus2 Action 返回的json结果. 所以我在添加了个action专门提供上传好的文件属性和一些...

Zero__One
2012/07/06
498
1
使用struts2+uploadify上传图片问题

使用struts2+uploadify上传图片,页面上都提示上传成功了,但是在后台调试时却发现UploadAction里的方法压根就没进去,也不报错,请问这是怎么回事?

嵇智
2014/07/17
326
2
struts2+uploadify 上传3G以上的大文件 报IO ERROR错误,请求支援

jsp: $(document).ready(function(){ var msg = document.getElementById("msg").value; if(msg != ""){ alert(msg); window.location.href="<%=basePath%>video/main.do"; } //$("#upload......

Maloon
2014/01/10
1K
8
PHP.INI配置:文件上传功能配置教程

昨天分享了在PHP网站开发中如何在php.ini中配置实现session功能的PHP教程,今天继续分享在利用PHP实现文件上传功能时几点关键php.ini的配置。   说到在php.ini中的文件上传的配置,其实在之...

张志浩
2012/10/08
58
0
Nodejs express、html5实现拖拽上传

Nodejs express、html5实现拖拽上传 一、前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传。给用户体验带来很大问题...

james_laughing
2015/06/02
169
0

没有更多内容

加载失败,请刷新页面

加载更多

Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
38分钟前
3
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
57分钟前
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
6
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0
jenkins 插件下载加速最终方案

推荐做法 1、告诉jenkins 我哪些插件需要更新 jenkins插件清华大学镜像地址 https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json 1.进入jenkins系统管理 2.进入插件管...

vasks
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部