AjaxFileUpload组件结合Struts2异步图片上传

使用AjaxFileUpload组件结合Struts2异步上传需要添加如下文件：

ajaxfileupload.js

jquery-x.x.x-min.js

struts2相关jar包

AjaxFileUpload组件下载连接：http://download.csdn.net/detail/yangfuqian/4337967

具体实现代码：

服务端：

package com.tenghu.action.upload;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
/**
* 文件上传Action
* @author xiaohu
*
*/
public class FileUpload extends ActionSupport{
private String name;
//封装上传文件域的属性
private File file;
//封装上传文件类型的属性
private String fileContentType;
//封装上传文件名的属性
private String fileFileName;
//提示信息
private String json_message;

private String JSON_MESSAGE="json_message";

@Override
public String execute() throws Exception {
try {
//设置文件保存目录
String saveDir=getRootPath()+"/images";
File saveFile=new File(saveDir);
//判断
if(!saveFile.exists()){
saveFile.mkdirs();
}
//时间戳
String timeStr="zycs"+System.currentTimeMillis();
//获取文件后缀
String fileSuffix=fileFileName.substring(fileFileName.indexOf("."));
//拼接文件名
String fileName=timeStr+fileSuffix;
//创建文件输出流对象
OutputStream fos=new FileOutputStream(saveDir+"/"+fileName);
//创建文件输入流对象
InputStream fis=new FileInputStream(file);
//创建缓冲数组
byte[] buffer=new byte[1024];
int len=0;
//从输入流中将数据写入到输出流中
while((len=fis.read(buffer))!=-1){
//写入
fos.write(buffer,0,len);
}
//关闭资源
fis.close();
fos.close();
//上传成功地址
String successPath=getUrl()+"/images/"+fileName;
json_message="{\"result\":1,\"message\":\""+successPath+"\"}";
} catch (Exception e) {
e.printStackTrace();
json_message="{\"result\":0}";
}
return JSON_MESSAGE;
}
/**
* 返回服务器http地址
* @return
*/
private String getUrl(){
HttpServletRequest request=ServletActionContext.getRequest();
return "http://"+request.getRemoteHost()+request.getContextPath();
}

/**
* 获取项目根目录
* @return
*/
private String getRootPath(){
String filePath = Thread.currentThread().getContextClassLoader()
.getResource("").toString();
if (filePath.toLowerCase().indexOf("file:") > -1) {
filePath = filePath.substring(6, filePath.length());
}
if (filePath.toLowerCase().indexOf("classes") > -1) {
filePath = filePath.replaceAll("/classes", "");
}
if (filePath.toLowerCase().indexOf("web-inf") > -1) {
filePath = filePath.substring(0, filePath.length() - 9);
}
if (System.getProperty("os.name").toLowerCase().indexOf("window") < 0) {
filePath = "/" + filePath;
}

if (filePath.endsWith("/"))
filePath = filePath.substring(0, filePath.length() - 1);

return filePath;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public File getFile() {
return file;
}

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

public String getFileContentType() {
return fileContentType;
}

public String getJson_message() {
return json_message;
}
public void setJson_message(String jsonMessage) {
json_message = jsonMessage;
}
public void setFileContentType(String fileContentType) {
this.fileContentType = fileContentType;
}

public String getFileFileName() {
return fileFileName;
}

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

如果希望获取到上传图片的宽和高，可以添加以下代码：

//获取图片缓冲流对象
BufferedImage image=ImageIO.read(fis);
image.getWidth();//图片宽
image.getHeight();//图片高

这里的fis表示：InputStream输入流，也可以直接传入File文件对象

js代码：

<script type="text/javascript">
$(document).ready(function() {
//调用初始化方法
UPLOAD.init();
});

var UPLOAD = {
wWidth : $(window).width(),//获取浏览器可视化宽度
wHeight : $(window).height(),//获取浏览器可视化高度
//初始化上传文件窗口的位置
init : function() {
//获取窗口div对象
var uObj = $(".w_sub");
//设置上传窗口位置
uObj.css( {"left" : (this.wWidth - uObj.width()) / 2,"top" : (this.wHeight - uObj.height()) / 2});
//点击上传按钮显示上传窗口
$("#upload").click(function(){$("#upload_w").show();});

//调用关闭窗口
this.closeUp();
//调用关闭预览窗口
this.closePre();
//调用上传函数
this.btnUpload();
//调用预览图片
this.btnPreview();
this.dragDrop();

},
//关闭上传窗口
closeUp:function(){
$(".close").click(function(){$("#upload_w").hide();});
},
//关闭预览窗口
closePre:function(){
$(".pre").click(function(){$(".preview_w").hide();});
},//点击上传
btnUpload:function(){
$(".sub_upload").click(function(){
var file=$("#file").val();
if(file==""){
alert("请选择需要上传的图片");
return;
}else{
//判断上传文件格式
var suffixs=new Array("jpg","gif","png");
//截取上传文件格式
var fileType=file.substring(file.lastIndexOf('.')+1);
if($.inArray(fileType,suffixs)<=-1){
alert("图片格式错误");
return;
}else{
var	uploadUrl="uploadFile?time="+new Date().getTime();
//异步上传
$.ajaxFileUpload({
url:uploadUrl,
secureuri:false,
fileElementId:"file",//上传id，这里是<input type="file" name="file" id="file"/>
dataType:'text',
success:function(data,status){
var json=$.parseJSON(data);
if(json.result==1){
$("#upload_w").hide();
$(".url").val(json.message);
}else{
alert("上传失败!");
}

},
error:function(){
alert("异步失败");
}
});
}
}
});
},
//点击预览
btnPreview:function(){
//点击预览图片
$("#proview_img").click(function(){
//获取文本框中的路径
var imagePath=$(".url").val();
if(imagePath!=""){
$("#image").attr("src",$(".url").val());
$(".preview_w").show();
}else{
alert("还有上传图片");
}
});
},
/**
*拖拽弹窗
*/
dragDrop:function(){
var self=this;
var move=false;//标识是否移动元素
var offsetX=0;//弹窗到浏览器left的宽度
var offsetY=0;//弹出到浏览器top的宽度
var title=$(".title");
boxContent=$(".preview");
//鼠标按下事件
title.mousedown(function(){
move=true;//当鼠标按在该div上的时间将move属性设置为true
offsetX=event.offsetX;//获取鼠标在当前窗口的相对偏移位置的Left值并赋值给offsetX
offsetY=event.offsetY;//获取鼠标在当前窗口的相对偏移位置的Top值并赋值给offsetY
title.css({"cursor":"move"});
}).mouseup(function(){
//当鼠标松开的时候将move属性摄hi为false
move=false;
});
$(document).mousemove(function(){
if(!move){//如果move属性不为true，就不执行下面的代码
return;
}
//move为true的时候执行下面代码
var x = event.clientX-offsetX; //event.clientX得到鼠标相对于客户端正文区域的偏移，然后减去offsetX即得到当前推拽元素相对于当前窗口的X值（减去鼠标刚开始拖动的时候在当前窗口的偏移X）
var y = event.clientY-offsetY; //event.clientY得到鼠标相对于客户端正文区域的偏移，然后减去offsetX即得到当前推拽元素相对于当前窗口的Y值（减去鼠标刚开始拖动的时候在当前窗口的偏移Y）
if(!(x<0||y<0||x>(self.wWidth-boxContent.width())||y>(self.wHeight-boxContent.height()))){
boxContent.css({"left":x,"top":y,"cursor":"move"});
}
});
}
}
</script>

这里使用的ajaxfileupload异步上传组件

html代码：

<body>
上传后的文件路径：
<input type="text" class="url" />
<span id="upload">上传</span>
<span id="proview_img">预览</span>
<br/>

<!-- 上传文件弹窗 -->
<div id="upload_w">
<!-- 遮盖部分 -->
<div class="cover"></div>
<div class="w_sub">
<form action="" method="post" enctype="multipart/form-data">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><th class="title">图片上传<span class="close">×</span></th></tr>
<tr><td style="padding-left: 20px">选择图片文件：<br />
<input type="file"style="width: 95%; border: 1px solid #ddd; height: 25px; border-radius: 3px" name="file" id="file">
</td>
</tr>
<tr><td>${promptInfo }</td></tr>
<tr height="50px">
<td align="center"><input type="button" value="上传" class="sub_upload" /></td>
</tr>
</table>
</form>
</div>
</div>

<!-- 预览图片窗口 -->
<div class="preview_w">
<!-- 遮盖部分 -->
<div class="cover"></div>
<div class="preview">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><th class="title">图片预览<span class="pre">×</span></th></tr>
<tr>
<td style="padding: 20px">
<img src="" id="image"/>
</td>
</tr>
</table>
</div>
</div>
</body>

css代码：

<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

body {
font: normal 15px/ 30px '微软雅黑'
}

.url {
width: 250px;
height: 30px;
border: 1px solid #CCCCCC;
border-radius: 4px;
}

span {
color: #999999;
cursor: pointer;
}

span:hover {
color: orange
}

/*上传文件弹窗效果*/
#upload_w,.preview_w{display: none;}

.cover {
width: 100%;
height: 100%;
filter: alpha(opacity = 30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
background: #CCCCCC;
position: fixed;
top: 0
}

.w_sub {
height: 150px;
width: 350px;
border: 3px solid #2CB9F2;
background: #FFFFFF;
position: fixed;
padding: 10px;
}

/*上传按钮*/
.sub_upload {
height: 30px;
width: 70px;
background-color:#0A86CB;
border-right:2px solid #0879B9;
border-bottom:2px solid #0879B9;
color:#FFFFFF;
}
.close,.pre{
color:#2CB9F2;
color:#0879B9;
font-size: 25px;
float: right;
margin-right: 8px;
line-height: 25px;
cursor: pointer;
}
.preview{
position: fixed;
padding: 10px;
border: 3px solid #2CB9F2;
background:#FFFFFF;
top:100px;
left:100px;
}

table{border:1px solid #2CB9F2}
.title{
height:35px;
background-color: #D6DEE3;
font:normal 15px '微软雅黑';
text-align: left;
padding-left: 10px;
color:#4C5A5F;
}
</style>

需要引入js文件：

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>

实现效果：

初始化界面：



上传窗口：



上传成功后将文件路径放入文本框中：



预览窗口：