Structs2文件上傳以及預覽


首先完成准備工作:
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 。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com