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,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>

实现效果：

初始化界面：

上传窗口：

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

预览窗口：

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

猜你在找的Ajax相关文章