uploadify struts2实现图片上传详解编程语言

uploadify是来自国外的一款优秀的jQuery上传插件，主要功能是批量上传文件，带进度显示。

包括两个版本,一个是Flash的一个是HTML5的。下面介绍Flash版本如何使用

1、下载 Uploadify Zip

2、解压缩包并上传下列文件到您的网站上的一个文件夹：

jquery.uploadify.min.js

uploadify.css

uploadify-cancel.png

uploadify.swf

3、在您使用uploadify页面也不要忘了引入jQuery库

4、在页面引入如下文件

<script type="text/javascript" src="uploadify/jquery-1.8.0.min.js"></script> 
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script> 
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">

5、页面添加file input

<input type="file" name="file_upload" id="file_upload" />

6、初始化uploadify

$(function() { 
    $('#file_upload').uploadify({ 
        'swf'      : 'uploadify.swf', 
        'uploader' : 'fileUploadAction.action' 
        // Put your options here 
    }); 
});

7、最终页面应该像如下这样

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
	<head> 
		<title>uploadify</title> 
		<script type="text/javascript" src="uploadify/jquery-1.8.0.min.js"></script> 
		<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script> 
		<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css"> 
	</head> 
	<body> 
		<input type="file" name="file_upload" id="file_upload" /> 
	</body> 
	 
	<script type="text/javascript"> 
		$(function() { 
			$('#file_upload').uploadify( { 
				'swf' : 'uploadify/uploadify.swf', 
				'uploader' : 'fileUploadAction.action', //处理上传文件Action路径  
				'fileObjName' : 'file',        //文件对象 
				'buttonText'   : '选择文件',   //按钮显示文字  
			}); 
		}); 
	</script> 
</html>

更多uploadify属性请参考http://www.uploadify.com/documentation/

处理上传文件Action省略，需要的可以下载源码：download

效果如图：

uploadify struts2实现图片上传详解编程语言