1. 程式人生 > >web開發之上傳圖片備忘

web開發之上傳圖片備忘

:D 把圖片上傳到伺服器,然後在前端頁面顯示檢視的方法很多,作為一個入門的程式設計師,我把用到過的方法記錄如下。
方法一,用struts 1上傳圖片。步驟如下:
1 建立一個ActionForm。
public class MessForm extends ActionForm
{
private FormFile photo;

public FormFile getPhoto()
{
return photo;
}

public void setPhoto(FormFile photo)
{
this.photo = photo;
}
}
其中FormFile用來存放上傳的圖片。
2 建立一個Action。
public class AddAction extends Action
{
public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) throws Exception
{
// TODO Auto-generated method stub
MessForm mf = (MessForm) form;

FormFile photo = mf.getPhoto();
String photoPath = this.getServlet().getServletContext().getRealPath("/") + "upload\\" + photo.getFileName();//儲存目錄,可以在配置檔案裡設定,這樣可以方便更改儲存目錄

FileOutputStream fos = new FileOutputStream(photoPath);
fos.write(photo.getFileData());
fos.flush();
fos.close();
return mapping.findForward("add");

}

}
3 寫配置檔案struts-config.xml。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd">

<struts-config>
<data-sources />
<form-beans>
<form-bean name="messForm" type="com.model.MessForm"></form-bean>
</form-beans>
<global-exceptions />
<global-forwards />
<action-mappings>
<action
path="/cadd"
parameter="sc"
type="com.action.AddAction"
name="messForm">
<forward name="add" path="/science/find.jsp"/>
</action>

</action-mappings>
<message-resources parameter="ApplicationResources" />
</struts-config>
這樣就可以把圖片上傳到伺服器了。


方法二,用struts 2上傳圖片。步驟如下:
1 建立一個Action。
public class RegisterAction extends ActionSupport
{

//封裝上傳檔案域的屬性
private File photo;
//封裝上傳檔案型別的屬性
private String photoContentType;
//封裝上傳檔名的屬性
private String photoFileName;
//接受依賴注入的屬性
private String savePath;

public File getPhoto()
{
return photo;
}
public void setPhoto(File photo)
{
this.photo = photo;
}
public String getPhotoContentType()
{
return photoContentType;
}
public void setPhotoContentType(String photoContentType)
{
this.photoContentType = photoContentType;
}
public String getPhotoFileName()
{
return photoFileName;
}
public void setPhotoFileName(String photoFileName)
{
this.photoFileName = photoFileName;
}
public String getSavePath()
{
return ServletActionContext.getRequest().getRealPath(savePath);
}
public void setSavePath(String savePath)
{
this.savePath = savePath;
}

@Override
public String execute() throws Exception
{
// TODO Auto-generated method stub
//以伺服器的檔案儲存地址和原檔名建立上傳檔案輸出流
FileOutputStream fos = new FileOutputStream(getSavePath() + "\\" + getPhotoFileName());

//以上傳檔案建立一個檔案上傳流
FileInputStream fis = new FileInputStream(getPhoto());
//將上傳檔案的內容寫入到伺服器
byte[] buffer = new byte[1024];
int len = 0;
while((len = fis.read(buffer)) > 0)
{
fos.write(buffer, 0, len);
}
return SUCCESS;

}
}

2 寫配置檔案struts.xml。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<!-- 國際化資原始檔 -->
<constant name="struts.custom.i18n.resources" value="globalMessages"></constant>
<package name="mypackage" extends="struts-default">
<action name="register" class="org.chh.controller.RegisterAction">
<interceptor-ref name="fileUpload">
<param name="allowedTypes">image/bmp,image/png/,image/gif,image/jpeg,image/jpg</param>
<param name="maximumSize">10240</param>
</interceptor-ref>
<interceptor-ref name="defaultStack"></interceptor-ref>

<param name="savePath">/upload</param>
<result name="success">information.jsp</result>
<result name="input">register.jsp</result>
</action>
</package>

</struts>
這樣就可以把圖片上傳到伺服器了。

上面兩種方法只是把圖片上傳到伺服器的某個目錄,並沒有把圖片儲存到資料庫中,這種做法有個缺陷,就是兩張圖片名字相同的時候,最後上傳的圖片會把之前的圖片覆蓋掉。我們可以通過產生一個大的不重複的隨機數,然後把這個隨機數連線在圖片名字的後面,來確保圖片名字唯一。或者通過java.util.UUID類產生一個UUID連線在圖片名字後面也行。當然,最好的做法是把圖片存入資料庫了。

圖片上傳到伺服器後,就可以在客戶端顯示了,一個簡單的jsp程式碼如下:
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"upload/相片名";
%>
<img src="<%=basePath %>width="129" height="150"/>
:D