SSH表單上傳圖片實例

SSH框架的一個上傳到服務器而後顯示在頁面上的小實例，用的是簡單的form表單形式，數據包括圖片的url地址保存在數據庫中，圖片上傳到tomcat服務器下的項目文件夾裏，而後頁面展現圖片, 算是好好把上傳功能給過了一遍了，固然還有什麼H5上傳，分片上傳等等這裏就不提了，適用於初學上傳文件的例子。

使用Bootstrap fileinput.js上傳控件，
GitHub源碼下載：https://github.com/kartik-v/b...

頁面上須要引入的CSS和JS

<link rel="stylesheet" type="text/css" href="css/fileinput.min.css">
<script type="text/javascript" src="js/fileinput.min.js"></script>

效果仍是不錯的

頁面代碼（參考）

<form action="uploadAction" method="post" enctype="multipart/form-data"
        id="myform">
        <!-- 圖片標題     -->
        <input class="form-control" type="text" name="img_title"
            id="img_title" size="100" value="請輸入圖片名稱" style="color: #999999;"
            onfocus='if(this.value=="請輸入圖片名稱"){this.value="";};'
            onblur='if(this.value==""){this.value="請輸入圖片名稱";};'> <br />
        <!-- 下拉框 -->
        <select name="img_state">
            <option selected="selected">請選擇審覈狀態</option>
            <c:forEach items="${stateList }" var="sl">
                <option value="${sl.s_id }">${sl.s_statename}</option>
            </c:forEach>
        </select> <br />
        <br />
        <!-- 圖片上傳控件 -->
        <input type="file" name="file" id="file" class="file" /> <br>
    </form>
    <center>
        <a href="executeimages" class="btn btn-success">返回圖集</a>
    </center>

uploadAction(MyEclipse的web-info下建立uploadFile文件夾)
這裏沒有用smartupload或者是別的上傳jar包

package com.Action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.List;

import org.apache.struts2.ServletActionContext;

import Enity.cms_images;
import Enity.cms_state;
import SQL_Implements.images_sql_Implem;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class uploadAction extends ActionSupport {
    /**
     * 這裏集合形式輸入到流，防止上傳重複文件,減小服務器壓力
     */
    private String img_title;// 圖片標題
    private int img_state;// 狀態
    // 上傳文件存放路徑
    private final static String uploadAddres = "/uploadFile";

    // 上傳文件集合泛型爲file對象
    private List<File> file;
    // 上傳文件名集合
    private List<String> fileFileName;
    // 上傳文件內容類型集合
    private List<String> fileContentType;

    cms_images images = new cms_images();
    cms_state state = new cms_state();// 實例狀態類
    private images_sql_Implem isi;
    cms_imagesAction cia;

    public cms_imagesAction getCia() {
        return cia;
    }

    public void setCia(cms_imagesAction cia) {
        this.cia = cia;
    }

    public int getImg_state() {
        return img_state;
    }

    public void setImg_state(int img_state) {
        this.img_state = img_state;
    }

    public cms_state getState() {
        return state;
    }

    public void setState(cms_state state) {
        this.state = state;
    }

    public images_sql_Implem getIsi() {
        return isi;
    }

    public void setIsi(images_sql_Implem isi) {
        this.isi = isi;
    }

    public static String getUploadaddres() {
        return uploadAddres;
    }

    public cms_images getImages() {
        return images;
    }

    public void setImages(cms_images images) {
        this.images = images;
    }

    public String getImg_title() {
        return img_title;
    }

    public void setImg_title(String img_title) {
        this.img_title = img_title;
    }

    public List<File> getFile() {
        return file;
    }

    public void setFile(List<File> file) {
        this.file = file;
    }

    public List<String> getFileFileName() {
        return fileFileName;
    }

    public void setFileFileName(List<String> fileFileName) {
        this.fileFileName = fileFileName;
    }

    public List<String> getFileContentType() {
        return fileContentType;
    }

    public void setFileContentType(List<String> fileContentType) {
        this.fileContentType = fileContentType;
    }

    // 上傳方法
    public String execute() throws Exception {
        // 打印文件名稱
        System.out.println("文件名稱:" + this.getFileFileName());
        for (int i = 0; i < file.size(); i++) {
            // 循環上傳每一個文件
            uploadFile(i);
        }
        /**
         * 這裏有bug 想每次添加完後能在查詢一遍下拉框的值
         */
        // cia.execute();
        return "uploadSuccess";
    }

    // 調用執行上傳功能
    @SuppressWarnings("deprecation")
    public void uploadFile(int i) throws FileNotFoundException, IOException {
        try {
            InputStream in = new FileInputStream(file.get(i));
            // ServletActionContext對象響應獲取實際文件地址,getRealPath已經廢棄不推薦用了
            String dir = ServletActionContext.getRequest().getRealPath(
                    uploadAddres);
            System.out.println("服務器路徑：" + dir);
            // 獲取文件名稱
            String fileName = this.getFileFileName().get(i);
            // 路徑和文件名丟進file對象裏
            File uploadFile = new File(dir, fileName);
            // 輸出流
            OutputStream out = new FileOutputStream(uploadFile);
            // 設置文件大小1MB
            byte[] buffer = new byte[1024 * 1024];
            int length;
            // 用循環從流中讀取文件的大小
            while ((length = in.read(buffer)) > 0) {
                out.write(buffer, 0, length);
            }

            // 設置圖片標題和全路徑
            images.setImg_title(img_title);
            String imgURL = dir + "/" + fileName;
            // 將全路徑截取爲相對路徑
            String strURL = imgURL.substring(32);
            images.setImg_url(strURL);

            // 設置狀態的id，並將id對象傳入
            state.setS_id(img_state);
            images.setImg_state(state);
            // 添加圖片的信息
            int num = isi.addIMG(images);
            System.out.println("是否上傳了信息：" + num);
            // 關閉輸入流輸出流，釋放內存
            in.close();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

演示效果圖

圖片上傳到了tomcat下的項目指定的文件夾裏了

頁面展現（這個部分就各有各有寫法了）