首先完成准备工作:
1. 添加Structs2功能,添加包或者用MyEclipse添加Struicts2能力。
2. 新建index.jsp,为文件上传的页面。
3. fileUpload.java为上传文件的action
4. structs.xml文件中进行action配置
5. fileUploadSuccess.jsp,文件上传成功页面提醒
导读:
图片的预览是用js实现的,当然也可以用其他的插件实现更好的交互效果。
直接上代码:
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var width=0;//显示图片的对象
var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '150px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
/*
URL对象是硬盘(SD卡等)指向文件的一个路径,如果我们做文件上传的时候
想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过
var url=window.URL.createObjectURL(obj.files[0]);
获得一个http格式的url路径,这个时候就可以设置到<img>中显示了。
*/
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
width= window.URL.createObjectURL(docObj.files[1]);
}
else
{
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "150px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</head>
<body>
<center>
<!--文件的上传 -->
<!--enctype内容的含义的是进行二进制表单信息传输 -->
<form action="fileUpload.action" enctype="multipart/form-data" method="post">
文件上传:<input type="file" name="upload" id="doc" onchange="javascript:setImagePreview();">
<input type="submit" value="上传" >
</form>
<div>
<div style="width:150px;height:150px;margin-top:20px;border:1px solid #000">
<img id="preview" alt="图片预览" src="">
</div>
</div>
<div style="margin-top:4px;color:red;">
<p>图片预览为150px*150px</p>
</div>
</center>
</body>
</html>
action: fileUpload.java
此处上传到 根目录下的images文件夹下:
package com.java.fileUpload;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class fileUpload extends ActionSupport{
//封装上传文件域的属性--即文件的二进制data
private File upload;
//封装上传文件类型的属性
private String uploadContentType;
//封装上传文件名
private String uploadFileName;
//直接在struts.xml文件中配置的属性
private String savePath;
//此处的savePath可以在strucst2.xml配置文件中配置也可以不配置,此处选择不配置,在下文中直接指定存放路径
public void setSavePath(String value)
{
this.savePath = value;
}
//返回上传文件的保存位置
private String getSavePath() throws Exception
{
//上传到根目录下的images文件夹下
//首先找到iamges的绝对路径
return ServletActionContext.getServletContext()
.getRealPath("/images");
}
//上传文件对应文件内容的setter和getter方法
public void setUpload(File upload)
{
this.upload = upload;
}
public File getUpload()
{
return (this.upload);
}
//上传文件的文件类型的setter和getter方法
public void setUploadContentType(String uploadContentType)
{
this.uploadContentType = uploadContentType;
}
public String getUploadContentType()
{
return (this.uploadContentType);
}
//上传文件的文件名的setter和getter方法
public void setUploadFileName(String uploadFileName)
{
this.uploadFileName = uploadFileName;
}
public String getUploadFileName()
{
return (this.uploadFileName);
}
@Override
public String execute() throws Exception
{
String string = getUpload().toString();
System.out.println(string);
//以服务器的文件保存地址和原文件名建立上传文件输出流
FileOutputStream fos = new FileOutputStream(getSavePath()
+ "\\" + getUploadFileName());
FileInputStream fis = new FileInputStream(getUpload());
byte[] buffer = new byte[1024];
int len = 0;
while ((len = fis.read(buffer)) > 0)
{
fos.write(buffer , 0 , len);
}
fos.close();
fis.close();//清楚tmp临时文件
return SUCCESS;
}
}
structs2.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<package name="actions" namespace="/" extends="struts-default">
<action name="fileUpload" class="com.java.fileUpload.fileUpload">
<result name="success">/fileUploadSuccess.jsp</result>
</action>
</package>
</struts>
fileUploadSuccess.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<center>
<h1>文件上传成功!恭喜!</h1>
</center>
</body>
</html>
实现的效果:
预览页面:
上传成功:
查找项目的路径,在images文件夹下查看图片是否上传:
图片上传成功!
注:当然,上传文件 使用框架能够更加的方便和快捷,达到更好的交互效果。个人感觉http://fex.baidu.com/webuploader/不错,Web Uploader 。