利用struts2框架實現當用戶上傳圖片到服務器後,再顯示到前臺頁面中

分析:由於struts2已經集成了fileupload,而且用起來要比直接使用更加方便,所以當實現文件上傳功能的時候最好選擇struts2

1、開發前的準備:

導入struts2的jar包、struts.xml配置文件、同時將web.xml配置好。(此過程比較容易,這裏不在說明)

2、action代碼的編寫(實現文件上傳的功能,並轉發到顯示照片的頁面中)

package com.xiaojie.upload;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.util.Date;
import java.util.Map;

import javax.servlet.ServletContext;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.interceptor.RequestAware;

import com.opensymphony.xwork2.ActionSupport;
import com.xiaojie.service.ProductService;

public class UploadAction extends ActionSupport implements RequestAware {
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private ProductService productService=new ProductService();
	private File wj;
	private String wjContentType;//文件類型
	private String wjFileName;//文件名
	private Map<String, Object> request;
	private String wjName;
	public String getWjName() {
		return wjName;
	}
	public void setWjName(String wjName) {
		this.wjName = wjName;
	}
	private String wjDesc;
	
	public File getWj() {
		return wj;
	}
	public void setWj(File wj) {
		this.wj = wj;
	}
	public String getWjContentType() {
		return wjContentType;
	}
	public void setWjContentType(String wjContentType) {
		this.wjContentType = wjContentType;
	}
	public String getWjFileName() {
		return wjFileName;
	}
	public void setWjFileName(String wjFileName) {
		this.wjFileName = wjFileName;
	}
	public String getWjDesc() {
		return wjDesc;
	}
	public void setWjDesc(String wjDesc) {
		this.wjDesc = wjDesc;
	}
	@Override
	public String execute() throws Exception {
		// TODO Auto-generated method stub
		//修改文件名
		wjFileName=new Date().getTime()+wjFileName;
		ServletContext servletContext=ServletActionContext.getServletContext();
		String path=servletContext.getRealPath("/images/"+wjFileName);//文件最終要上傳到的路徑
		FileOutputStream out=new FileOutputStream(path);
		FileInputStream in=new FileInputStream(wj);
		byte[]buffer=new byte[1024];
		int len=0;
		while((len=in.read(buffer))!=-1){
			out.write(buffer,0,len);
			
		}
		out.close();
		in.close();
		String image="images/"+wjFileName;
		request.put("image", image);
		return super.execute();
	}
	@Override
	public void setRequest(Map<String, Object> arg0) {
		// TODO Auto-generated method stub
		this.request=arg0;
	}
}

3、文件上傳頁面代碼和圖片顯示頁面代碼

3.1文件上傳頁面:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@ taglib prefix="s" uri="/struts-tags" %>
<!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=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="upload" method="post" enctype="multipart/form-data">
		商品圖片:<input type="file" name="wj"/><br>
		商品名稱:<input type="text" name="wjName"/>
		商品描述:<input type="text" name="wjDesc"/>
		<input type="submit" value="提交"/>
	</form>

</body>
</html>
注意:圖片會上傳到你在tomcat上所部署的目錄文件夾下的images文件夾下:(是不是多了一張圖片?)


3.2、圖片顯示頁面代碼:

<%@ 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=UTF-8">
<title>Insert title here</title>
</head>
<body>
圖片上傳成功
<img alt="" src="${requestScope.image } " >http://localhost:8080/flieupload/${requestScope.image }
</body>
</html>

特別注意:由於用戶很有可能會上傳中文名稱的圖片,這會導致圖片無法在前臺頁面上顯示出來。這個問題怎麼解決呢?

在tomcat的server.xml中加入URIEncoding="utf-8"(網頁的編碼是utf-8)<Connector port="8080" connectionTimeout="20000" disableUploadTimeout="true" URIEncoding="utf-8" />


如果還有什麼不懂的,可以直接聯繫我的qq:1913284695

或者微信:fyydbc
發佈了54 篇原創文章 · 獲贊 93 · 訪問量 25萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章