1. 程式人生 > >【Dongle】【SSH】商品圖片上傳

【Dongle】【SSH】商品圖片上傳

       利用SSH框架,通過模型驅動將商品資訊自動帶回,但是由於圖片儲存的路徑,故而需要先將圖片上傳到伺服器,然後轉換成伺服器中的路徑。

       在web頁面上上傳檔案到伺服器,而由於新增商品不僅僅是儲存圖片,還要獲取商品名稱、價格、型別等等資訊,故而採用表單的形式提交商品資訊。但是一般預設的表單村才上傳檔案大小的限制,故而需要在表單中新增屬性enctype="multipart/form-data"。

JSP頁面

      表單設定

<form id="userAction_save_do" name="Form1" action="${pageContext.request.contextPath}/adminProduct_save.action" method="post" enctype="multipart/form-data"></form>

      上傳檔案的控制元件設定(在表單內)

<input type="file" name="upload" />

然後通過利用SSH框架,在action中收上傳資訊

Action類

package cn.itcast.shop.product.adminaction;

import java.io.File;
import java.io.IOException;
import java.text.ParseException;
import java.util.Date;
import java.util.List;

import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;

import cn.itcast.shop.categorysecond.service.CategorySecondService;
import cn.itcast.shop.categorysecond.vo.CategorySecond;
import cn.itcast.shop.product.service.ProductService;
import cn.itcast.shop.product.vo.Product;
import cn.itcast.shop.utils.DateTimeUtils;
import cn.itcast.shop.utils.PageBean;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

/*
 * 後臺管理商品的action
 */
public class AdminProductAction extends ActionSupport implements
		ModelDriven<Product> {
	// 模型驅動使用的物件
	Product product = new Product();
	// 注入轉換時間格式的物件
	private DateTimeUtils dateTimeUtils = new DateTimeUtils();

	public Product getModel() {
		return product;
	}

	// 接受page引數
	private Integer page;

	// 注入商品的Service
	private ProductService productService;
	// 注入二級分類的Service
	private CategorySecondService categorySecondService;

	// 檔案上傳需要的引數
	private File upload;// 上傳的檔案
	private String uploadFileName;// 接收檔案上傳的檔名
	private String uploadContext;// 接收檔案上傳的檔案的MIME的型別

	public void setUpload(File upload) {
		this.upload = upload;
	}

	public void setUploadFileName(String uploadFileName) {
		this.uploadFileName = uploadFileName;
	}

	public void setUploadContext(String uploadContext) {
		this.uploadContext = uploadContext;
	}

	public void setCategorySecondService(
			CategorySecondService categorySecondService) {
		this.categorySecondService = categorySecondService;
	}

	public void setProductService(ProductService productService) {
		this.productService = productService;
	}

	public void setPage(Integer page) {
		this.page = page;
	}

	// 帶分頁的查詢商品的執行的方法
	public String findAll() {
		// 呼叫service完成查詢操作
		PageBean<Product> pageBean = productService.findAll(page);
		// 將資料傳遞到頁面上
		ActionContext.getContext().getValueStack().set("pageBean", pageBean);
		// 頁面跳轉
		return "findAll";
	}

	// 跳轉到新增商品頁面的方法
	public String addPage() {
		// 查詢所有的二級分類的集合
		List<CategorySecond> csList = categorySecondService.findAll();
		// 通過值棧進行儲存資料
		ActionContext.getContext().getValueStack().set("csList", csList);
		// 頁面的跳轉
		return "addPageSuccess";
	}

	// 儲存商品的方法
	public String save() throws IOException, ParseException {
		// 獲取當前時間
		Date date = new Date();
		// 進行時間轉換
		date = dateTimeUtils.convertDate(date);
		// 設定商品儲存的日期時間
		product.setPdate(date);
		if (upload != null) {
			// 獲得檔案上傳的磁碟絕對路徑
			String realPath = ServletActionContext.getServletContext()
					.getRealPath("/products");// 獲得圖片的絕對路徑
			// 建立一個檔案
			File diskFile = new File(realPath + "//" + uploadFileName);
			// 檔案上傳
			FileUtils.copyFile(upload, diskFile);
			product.setImage("products/" + uploadFileName);// 上傳到products目錄中(還有異常,比如檔案重名)
		}
		// 呼叫service完成儲存的操作
		productService.save(product);
		// 頁面跳轉
		return "saveSuccess";
	}
}

Service類

        將商品資訊傳給Service層進行儲存

	//業務層儲存商品的資訊
	public void save(Product product) {
		productDao.save(product);
	}
Dao類

       Service在將資料傳遞給dao層,通過dao類將資料儲存到資料庫中

	//DAO層儲存商品資訊的方法
	public void save(Product product) {
		this.getHibernateTemplate().save(product);
	}
      這樣使用者上傳到的檔案就到了伺服器的對應products資料夾下,然後伺服器內儲存的圖片路徑則是伺服器上products檔案中對應圖片的路徑,然後就完成了從使用者到伺服器的商品錄入。

如果是修改商品,若商品圖片改變,則需要先將伺服器中的圖片刪除,然後再上傳新的圖片,和儲存時類似的過程。


相關推薦

DongleSSH商品圖片

       利用SSH框架,通過模型驅動將商品資訊自動帶回,但是由於圖片儲存的路徑,故而需要先將圖片上傳到伺服器,然後轉換成伺服器中的路徑。        在web頁面上上傳檔案到伺服器,而由於新增商品不僅僅是儲存圖片,還要獲取商品名稱、價格、型別等等資訊,故而採用表單的

SSH框架實現圖片

第一步,先寫上傳的jsp頁面upload.jsp,注意:一定要在form裡面加enctype="multipart/form-data" <!--在開頭加上這個,以防萬一--> <%@taglib prefix="s" uri="/struts-tags"%> <

SSH 框架下圖片與顯示

這幾天在弄畢設,有幾個需求是要上傳圖片的,看了很多教程,各有各的說法,關鍵點、細節很多說不明白,自己倒騰了幾天,弄出來了,給大家分享一下。上傳圖片的JSP<%@ page language="java" import="java.util.*" pageEncoding

商品圖片(使用FastDFS)

在商品錄入介面實現多圖片上傳當用戶點選新建按鈕,彈出上傳視窗工程pom.xml引入依賴<!-- 檔案上傳元件 --> <dependency> <groupId>org.csource.fastdfs</groupId>

圖片封裝類包括圖片和縮略圖.NET

tolower tdi p s else col width posted ef6 substr 原文發布時間為:2009-08-30 —— 來源於本人的百度文章 [由搬家工具導入]#region 上传图片Լ

圖片移動端圖片旋轉、壓縮的解決方案

dex adding .com pad 移動 side www shu add 移動端圖片上傳旋轉、壓縮的解決方案 來源 知乎 作者 林鑫 工作上有手機上傳準考證等圖片的功能,這個是非常必要的,作者寫的很全面,就直接記錄這個地址了 還有一篇 文件的上傳、下載

基於初學者的SSHstruts2 值棧的詳解與struts2標簽庫+ognl表達式

radi ring etl action 值棧 多選 https submit 技術分享 一:什麽是值棧:struts2裏面本身提供的一種存儲機制,類似於域對象,值棧,可以存值和取值  特點:先進後出,最上面的元素叫做棧頂,也叫壓棧。  <s:debug><

Editor富文本編輯器配置不含圖片

初始化 src rip eba portal tar family 根據 utf 一,下載地址:http://ueditor.baidu.com/website/download.html   1)根據需要下載相應版本     例 Java:選擇jsp+utf-8; 二,

轉載JAVA秒會技術之圖片基於Nginx及FastDFS,完成圖片及展示

相互 沒有 con 性能 ext 存儲服務器 網絡 管理 代理配置 基於Nginx及FastDFS,完成商品圖片的上傳及展示 一、傳統圖片存儲及展示方式 存在問題: 1)大並發量上傳訪問圖片時,需要對web應用做負載均衡,但是會存在圖片共享問題 2)web應

原創MVC項目中使用JQuery的upladify圖片插件相關問題的解決方案

ack pty let protect 失效 wid min fun adding 一. 關於Uploadify Uploadify是一個jQuery插件,你可以很容易的為你的網站添加多個文件上傳功能。有兩個不同的版本(HTML5和Flash)允許你靈活選擇為您的網站和回

html+css3在一張jpg圖片,顯示多張透明的png圖片

*** 放置 技術分享 一個 col 標簽 ech 透明 image 1、需求:在一個div布局裏面放置整張jpg圖片,然後在jpg圖片上顯示三張水平展示的透明png圖片,且png外層用a標簽包含菜單 2、效果圖: 3、上圖,底層使用藍色jpg圖片,【首頁】、【購物車】、【

七牛雲通過富文字summernote,圖片到七牛雲

在這邊我只對summernote富文字加以說明 1、首先是在index.html引入對應js和css <link rel="stylesheet" href="dist/static/summernote/summernote.css"> <script s

vue移動端通過cube-ui實現圖片

「Pre」cube-ui的安裝 POST:https://blog.csdn.net/dangbai01_/article/details/84935882    一、普通上傳   <cube-upload  &nb

Vuequill-editor富文字編輯器元件的運用與修改配置使圖片到伺服器

前言:Vue的生態已經越來越繁榮,越來越多有趣好用的元件加入的生態中了。quill-editor富文字編輯器就是很好用的元件之一。 一、quill-editor的安裝與使用 ①、安裝 npm install vue-quill-editor --save ②、

移動端實現相機喚起及圖片功能(包括微信)

前言 目前有個需求是圖片拍照上傳的功能,但是我就是死活掉不起相機。。。總是開啟的是檔案目錄OR上傳圖片。。。。而不是相機。。。 所以對比了下 程式碼: 參考了百度移動端實現方式。。。程式碼很簡單,對就這一句! <input type="file" acce

JS封裝相容正版IE9的控制元件,支援圖片格式,圖片大小,圖片寬高驗證,支援非圖片樣式

先廢話一小段,大家好,本人首篇處女作,為什麼要實現一個上傳控制元件呢,必然是公司需要嘛,實現整個過程挺揪心的,因為要解決ie9這個相容性問題,整體來說我前後用了五天的時間來實現。依賴了jquery,其實也可以使用原生編寫,不過想偷偷懶,公司也推薦使用jquery。因為是第一次

安卓選擇圖片功能支援多選拍照預覽等

在網上找了很多第三方的相簿拍照框架,都不盡人意,最後終於找到了一個比較好的框架,並且整合到了自己的demo中,花了兩天的時間吧感覺挺值的。老規矩不說廢話,直接上程式碼。 感謝某開源庫的作者:Alum 思路 目錄 先看目錄,我儘可能的在自己力所能及的範圍

移動端html5圖片方法更好的相容安卓IOS和微信

<!doctype html>  <html>  <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1, ma

ThinkPHP學習ThinkPHP結合KindEditor SAE storage檔案圖片

RT. 最近將我的使用thinkphp開發的專案移植到SAE上,遇到最大的問題就是,檔案的上傳問題。因為SAE關閉了網站目錄的寫許可權。所以不能夠往網站目錄中上傳檔案。 這篇文章介紹了PHP中kindeditor針對SAE storage的修改: 首先,在應用的srotag

UEditorphp版的UEditor 1.3.x圖片目錄的設定,與外掛的修改

UEditor的圖片上傳需要自己設定一下功能才能正常。同時,如下圖所示,圖片上傳外掛的“線上管理”、“圖片搜尋”等無意義的功能,需要自己手動根除一下。 還有,一般情況下,編輯器的圖片儲存目錄,上傳目錄就是一個,不應該給使用者自己手動選擇,也是需要自己手動刪除的。 修改