ssm異步上傳圖片

時間 2019-12-08

標籤 ssm 異步上傳圖片简体版

原文原文鏈接

1.首先引入jersey jar包javascript

2.在配置文件中，配置容許上傳圖片html

3.修改增長商品頁面java

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/back_page/head.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>babasport-add</title>
<script type="text/javascript">
    function uploadPic() {
    var options={
        url:"/cn/upload/uploadPic.do",       訪問保存圖片的controller層的方法
        dataType:"json",
        type:"post",
        success:function(data){
            //回調2個路徑
            //url  絕對路徑，用於在頁面上顯示圖片
            //path  相對路徑，保存在數據庫中
            $("#allImgUrl").attr("src",data.url);  顯示圖片
            $("#path").val(data.path)
        }
    }
        $("#jvForm").ajaxSubmit(options);
    }
</script>
</head>
<body>
<div class="box-positon">
    <div class="rpos">當前位置: 品牌管理 - 添加</div>
    <form class="ropt">
        <input type="submit" onclick="this.form.action='v_list.shtml';" value="返回列表" class="return-button"/>
    </form>
    <div class="clear"></div>
</div>
<div class="body-box" style="float:right">
    <form id="jvForm" action="/cn/brand/add.do" method="post" enctype="multipart/form-data">
        <table cellspacing="1" cellpadding="2" width="100%" border="0" class="pn-ftable">
            <tbody>
                <tr>
                    <td width="20%" class="pn-flabel pn-flabel-h">
                        <span class="pn-frequired">*</span>
                        品牌名稱:</td><td width="80%" class="pn-fcontent">
                        <input type="text" class="required" name="name" maxlength="100"/>
                    </td>
                </tr>
                <tr>
                    <td width="20%" class="pn-flabel pn-flabel-h">
                        <span class="pn-frequired">*</span>
                        上傳商品圖片(90x150尺寸):</td>
                        <td width="80%" class="pn-fcontent">
                        注:該尺寸圖片必須爲90x150。
                    </td>
                </tr>
                <tr>
                    <td width="20%" class="pn-flabel pn-flabel-h"></td>
                        <td width="80%" class="pn-fcontent">
                        <img width="100" height="100" id="allImgUrl"/>
                        <input type="hidden" name="imgUrl" id="path"/>  保存到數據庫中，貯存在對象裏 
                        <input type="file" onchange="uploadPic()" name="pic"/>  鼠標點擊選中發生的事件，就是已經保存圖片了
                    </td>
                </tr>
                <tr>
                    <td width="20%" class="pn-flabel pn-flabel-h">
                        品牌描述:</td><td width="80%" class="pn-fcontent">
                        <input type="text" class="required" name="description" maxlength="80"  size="60"/>
                    </td>
                </tr>
                <tr>
                    <td width="20%" class="pn-flabel pn-flabel-h">
                        排序:</td><td width="80%" class="pn-fcontent">
                        <input type="text" class="required" name="sort" maxlength="80"/>
                    </td>
                </tr>
                <tr>
                    <td width="20%" class="pn-flabel pn-flabel-h">
                        是否可用:</td><td width="80%" class="pn-fcontent">
                        <input type="radio" name="isDisplay" value="1" checked="checked"/>可用
                        <input type="radio" name="isDisplay" value="0"/>不可用
                    </td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td class="pn-fbutton" colspan="2">
                        <input type="submit" class="submit" value="提交"/> &nbsp; <input type="reset" class="reset" value="重置"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</div>
</body>
</html>

4.controller層方法web

package cn.itcast.core.controller.admin;

import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.FilenameUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import cn.itcast.common.web.ResponseUtils;
import cn.itcast.core.web.Constants;

import com.alibaba.fastjson.JSONObject;
import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;
/**
 * 上傳圖片
 * 商品
 * 品牌
 * 商品介紹Fck
 * @author lx
 *
 */
@Controller
public class UploadController {
	
	//上傳圖片
	@RequestMapping(value = "/upload/uploadPic.do")
	//異步，因此不須要返回值
	public void uploadPic(@RequestParam(required = false) MultipartFile pic,HttpServletResponse response){  false：不插圖片也不會報錯
		//擴展名
		String ext = FilenameUtils.getExtension(pic.getOriginalFilename()); 經過引入apache公司的jar包，來調用方法
		
		//圖片名稱生成策略
		DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS"); 避免重名覆蓋
		//圖片名稱一部分
		String format = df.format(new Date());
		
		//隨機三位數
		Random r = new Random();
		// n 1000   0-999   99
		for(int i=0 ; i<3 ;i++){
			format += r.nextInt(10);
		}
		
		//實例化一個Jersey
		Client client = new Client(); 至關於一個客戶端向服務器發送圖片
		//保存數據庫
		String path = "upload/" + format + "." + ext;
		
		//另外一臺服務器的請求路徑是?
		String url = Constants.IMAGE_URL  + path; 定義一個常量，後期修改方便
		//設置請求路徑
		WebResource resource = client.resource(url);
		
		//發送開始  POST  GET   PUT
		try {
			resource.put(String.class, pic.getBytes());
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		//返回二個路徑
		JSONObject jo = new JSONObject();
		jo.put("url", url);
		jo.put("path",path);
		
		ResponseUtils.renderJson(response, jo.toString()); 封裝成一個工具類

	}

}

5.返回其餘類型的工具類ajax

package cn.itcast.common.web;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

/**
 * 異步返回各類格式
 * json
 * xml
 * text
 * @author lx
 *
 */
public class ResponseUtils {

    //發送內容  
    public static void render(HttpServletResponse response,String contentType,String text){
        response.setContentType(contentType);
        try {
            response.getWriter().write(text);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    //發送的是JSON
    public static void renderJson(HttpServletResponse response,String text){
        render(response, "application/json;charset=UTF-8", text);
    }
    //發送xml
    public static void renderXml(HttpServletResponse response,String text){
        render(response, "text/xml;charset=UTF-8", text);
    }
    //發送text
    public static void renderText(HttpServletResponse response,String text){
        render(response, "text/plain;charset=UTF-8", text);
    }
    
    
}

6.圖片服務器常量spring

package cn.itcast.core.web;
/**
 * 業務常量
 * @author lx
 *
 */
public interface Constants {

	/**
	 * 圖片服務器
	 */
	public static final String IMAGE_URL = "http://localhost:8080/cn/";
}

7.顯示列表頁面圖片，在實體類中定義一個方法數據庫

package cn.itcast.core.bean.product;

import cn.itcast.core.web.Constants;

/**
 * 品牌
 * @author lx
 *
 */
public class Brand {

	private Integer id;
	private String name;
	private String description;
	private String imgUrl;
	private Integer sort;
	private Integer isDisplay;
	
	//獲取全路徑
	public String getAllUrl(){
		return Constants.IMAGE_URL + imgUrl;
	}
	
	//頁號
	private Integer pageNo = 1;
	//開始行
	private Integer startRow;
	//每頁數
	private Integer pageSize = 10;
	
	
	public Integer getStartRow() {
		return startRow;
	}
	public void setStartRow(Integer startRow) {
		this.startRow = startRow;
	}
	public Integer getPageSize() {
		return pageSize;
	}
	public void setPageSize(Integer pageSize) {
		//計算一次開始行
		this.startRow = (pageNo - 1)*pageSize;
		this.pageSize = pageSize;
	}
	public Integer getPageNo() {
		return pageNo;
	}
	public void setPageNo(Integer pageNo) {
		//計算一次開始行
		this.startRow = (pageNo - 1)*pageSize;
		this.pageNo = pageNo;
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	public String getImgUrl() {
		return imgUrl;
	}
	public void setImgUrl(String imgUrl) {
		this.imgUrl = imgUrl;
	}
	public Integer getSort() {
		return sort;
	}
	public void setSort(Integer sort) {
		this.sort = sort;
	}
	public Integer getIsDisplay() {
		return isDisplay;
	}
	public void setIsDisplay(Integer isDisplay) {
		this.isDisplay = isDisplay;
	}
	@Override
	public String toString() {
		return "Brand [id=" + id + ", name=" + name + ", description="
				+ description + ", imgUrl=" + imgUrl + ", sort=" + sort
				+ ", isDisplay=" + isDisplay + "]";
	}
	
	
}

8 在list頁面顯示apache

9.最後要在要接收的服務器（能夠是本地，或者另外一臺tomcat）修改配置文件json

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。