文档章节

jQuery 异步上传插件 Uploadify 使用 (Java平台)

雷霄骅
 雷霄骅
发布于 2014/08/16 13:55
字数 580
阅读 332
收藏 0

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。而且是Ajax的,省去了自己写Ajax上传功能的麻烦。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在J2EE中的使用。


1.引入头文件(注意一定要把jQuery放在前面):

注意:uploader是上传的Action路径名;formData是传递给Action的参数列表。

<script src="lib/jquery-1.8.3.min.js"></script>
<script src="lib/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<script type="text/javascript">
		$(function() {
			$('#projectfile').uploadify({
				'swf'      : 'lib/uploadify/uploadify.swf',
				'uploader' : 'ProjectfileAdd.action',
				'formData': {'projectid': '${project.id}'},
				'fileObjName' : 'file',
				'fileSizeLimit' : '0',
				'onQueueComplete' : function(queueData) {
            		alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
        			}
				
			});
		});
</script>


2.需要上传的地方添加一个<form>,里面有一个<input>(注意其id属性):

<form>
	<input id="projectfile" name="file" type="file" ></input>
</form>


3.看一下<input>效果如下,还挺美观的


4.后台的Action就是一个普通的上传文件的Action,示例如下:

package dc.action.projectfile;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.sql.Timestamp;
import java.util.Date;
import java.util.Map;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

import dc.bean.Project;
import dc.bean.Projectfile;
import dc.bean.User;
import dc.service.ProjectService;
import dc.service.ProjectfileService;

public class ProjectfileAdd extends ActionSupport {
	private static final int FILE_SIZE=16*1024;
	private int projectid;
	private ProjectService projectService;
	private ProjectfileService projectfileService;
	private File file;
	private String fileFileName;
	private String fileContentType;
	
	public int getProjectid() {
		return projectid;
	}

	public void setProjectid(int projectid) {
		this.projectid = projectid;
	}

	public ProjectService getProjectService() {
		return projectService;
	}

	public void setProjectService(ProjectService projectService) {
		this.projectService = projectService;
	}

	public ProjectfileService getProjectfileService() {
		return projectfileService;
	}

	public void setProjectfileService(ProjectfileService projectfileService) {
		this.projectfileService = projectfileService;
	}

	public File getFile() {
		return file;
	}

	public void setFile(File file) {
		this.file = file;
	}

	public String getFileFileName() {
		return fileFileName;
	}

	public void setFileFileName(String fileFileName) {
		this.fileFileName = fileFileName;
	}

	public String getFileContentType() {
		return fileContentType;
	}

	public void setFileContentType(String fileContentType) {
		this.fileContentType = fileContentType;
	}

	public static int getFileSize() {
		return FILE_SIZE;
	}

	//写入文件时候用到的函数
	 public void upLoadFile(File source,File target){
		  InputStream in=null;
		  OutputStream out=null;
		  try{
		   in=new BufferedInputStream(new FileInputStream(source),FILE_SIZE);
		   out=new BufferedOutputStream(new FileOutputStream(target),FILE_SIZE);
		   //in-->image-->out
		   byte[] image=new byte[FILE_SIZE];
		   while(in.read(image)>0){
		    out.write(image);
		   }
		  }catch(IOException ex){
		   ex.printStackTrace();
		  }finally{
		   try{
		    in.close();
		    out.close();
		   }catch(IOException ex){
			ex.printStackTrace();
		   }
		  }
		 }
	 
		public String execute() {
			try {
				Projectfile projectfile=new Projectfile();
				projectfile.setName(fileFileName);
				Project project=projectService.ReadByID(projectid);
				projectfile.setProject(project);
				projectfile.setModifytime( new Timestamp(new Date().getTime()));
				String filepath="file/"+project.getId()+"/"+fileFileName;
				projectfile.setFilepath(filepath);
				projectfile.setFilesize(file.length());
				//不是连接到外网的文件
				projectfile.setFilelink(0);
				projectfile.setContenttype(fileContentType);
				//--记录编辑人------------------
				ActionContext context = ActionContext.getContext();
				Map sessionMap = context.getSession();
				User currentuser=(User)sessionMap.get("user");
				projectfile.setUser(currentuser);
				//------------------------------
				//projectfile.setFilesize(1);
				projectfileService.save(projectfile);
				//文件上传,存至硬盘
				//ServletActionContext.getServletContext().getRealPath获得webRoot绝对路径
				String realfilePath=ServletActionContext.getServletContext().getRealPath("file")
				  +"/"+project.getId()+"/"+this.fileFileName;
				File targetFile=new File(realfilePath);
				targetFile.getParentFile().mkdirs();
				upLoadFile(file,targetFile);
			} catch (Exception ex) {
				ex.printStackTrace();
				return ERROR;
			}
			return SUCCESS;
		}
}


Uploadify官方网站: http://www.uploadify.com/

Uploadify下载:http://download.csdn.net/detail/leixiaohua1020/6376463


本文转载自:http://blog.csdn.net/leixiaohua1020/article/details/12651555

雷霄骅
粉丝 211
博文 419
码字总数 2129
作品 4
朝阳
程序员
私信 提问
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.7K
9
jquery uploadify插件教程

插件:Jquery Uploadify文件上传插件 http://www.uploadify.com/ 后端处理语言:java 使用前引入uploadify js和样式 <link rel="stylesheet" href="../css/uploadify.css" /> <script src=".......

青V芒
2014/01/17
3.4K
0
基于jQuery很牛X的批量上传插件

上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件...

voole
2013/11/16
15.9K
0
几款极好的 JavaScript 文件上传插件

jQuery File Uploader 这是最受欢迎的 jQuery 文件上传组件,支持批量上传,拖放上传,显示上传进度条以及校验功能。 支持预览图片、音频和视频,支持跨域上传和客户端图片缩放,支持的服务端...

hoojo
2013/09/26
0
0
7款基于JavaScript和AJAX的文件上传插件

本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助。 1. jQuery File U...

EDIAGD
2013/09/23
278
0

没有更多内容

加载失败,请刷新页面

加载更多

PCB设计-Allegro软件入门系列-铺铜操作(下)

铺铜是PCB很常见的操作,PCB的敷铜一般都是覆地铜,增大地线面积,有利于地线阻抗降低,使电源和信号传输稳定,在高频的信号线附近敷铜,可大大减少电磁辐射干扰,起屏蔽作用。 本讲讲解啊一...

demyar
1分钟前
0
0
如何通过WASI SDK 在Linux上编译ZXing C++

Mozilla在今年三月份的时候公布了WASI。WASI的目标就是让WebAssembly在任何地方都可以运行,而不仅仅像现在这样只能运行在Node.js和Web浏览器中。WASI目前依然处于初级阶段,这篇文章分享下如...

yushulx
2分钟前
0
0
.Net界面开发神器—DevExpress官方汉化包免费下载!还在等什么?

点击获取DevExpress v19.1.7新版试用下载 DevExpress Localization Service允许您创建一组自定义的附属程序集,要将语言包添加到程序集中,请查看本文中为大家列出的对应版本的汉化包,下载并...

FILA6666
3分钟前
0
0
php生成二维码

        header('Content-Type: image/png');        //清除缓冲区,防止之前面不知道的情况下被加头部信息导致不显示图片内容        ob_clean();        $...

横着走的螃蟹
8分钟前
0
0
伪类和伪元素

伪类和伪元素 伪类和伪元素,对于绝大多数同学来说,都是耳熟能详的名字,但确实又有很多人搞不清楚它们之间的区别,以致于混淆概念。而当概念都混淆的时候,也往往意味着你不会经常使用它,...

不负好时光
10分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部