前言

前一篇文章《Spring+SpringMVC+MyBatis+easyUI整合優化篇（六）easyUI與富文字編輯器UEditor整合》講了富文字編輯器UEditor的整合與使用，雖然其中也集成了圖片上傳功能，但是有時候需求不同，只需要一個圖片上傳就行了，不需要全部整合UEditor的，因為UEditor功能比較齊全，因此整合的東西較多，原始檔檔案也就很多多，是一個較大的外掛，如果我只需要一個圖片上傳功能，卻整合這麼多東西，是沒有必要的，因此本篇單獨講一下圖片上傳功能。 功能已經部署完畢，點選這裡去操作，賬密：admin 123456

我的github地址

整合步驟

基於jQuery上傳外掛Uploadify

頁面程式碼：

//form元素中需新增" enctype='multipart/form-data' "
<form id="fm" method="post" enctype="multipart/form-data">
        <div style="padding-top:50px;  float:left; width:95%; padding-left:30px;">
            <div id="i_do_wrap">
                <div id="pic11" style="display:none;" class="i_do_div rel">

                </div>
                <div class="i_do_div rel" id="picture"><p class="i_do_tle r_txt abs font14">展示圖片</p>
                </div>
            </div>
        </div>
    </form>
 

js上傳及回撥方法：

//這裡只是上傳圖片的js方法，並將服務端返回的url放入input標籤中
function initUploadify() {
        $("#uploadify2").uploadify({
            'uploader': 'swf/uploadify2.swf',           //flash檔案的相對路徑
            'script': '../loadimg/upload.do',               //後臺處理介面的相對路徑
            'fileDataName': 'file',                         //設定上傳檔名稱,預設為Filedata
            'cancelImg': 'images/cancel.png',           //每一個檔案上的關閉按鈕圖示
            'queueID': 'div_progress',                  //檔案佇列的ID，該ID與存放檔案佇列的div的ID一致
            'queueSizeLimit': 1,                            //當允許多檔案生成時，設定選擇檔案的個數，預設值：999
            'fileDesc': '*.jpg;*.gif;*.png;*.ppt;*.pdf;*.jpeg',     //用來設定選擇檔案對話方塊中的提示文字
            'fileExt': '*.jpg;*.gif;*.png;*.ppt;*.pdf;*.jpeg',      //設定可以選擇的檔案的型別
            'auto': true,                               //設定為true當選擇檔案後就直接上傳了，為false需要點選上傳按鈕才上傳
            'multi': true,                              //設定為true時可以上傳多個檔案
            'simUploadLimit': 1,                        //允許同時上傳的個數 預設值：1
            'sizeLimit': 2048000,                       //上傳檔案的大小限制
            'buttonText': '上傳圖片',                       //瀏覽按鈕的文字，預設值：BROWSE
            'displayData': 'percentage',                //上傳佇列顯示的資料型別，percentage是百分比，speed是上傳速度
            //回撥函式
            'onComplete': function (evt, queueID, fileObj, response, data) {
                $("#img11").attr("src", "../" + response);
                $("#input11").val(response);
                $("#pic11").removeAttr("style");
                $("#img11").removeAttr("style");
                return false;
            },
            'onError': function (event, queueID, fileObj, errorObj) {
                if (errorObj.type === "File Size") {
                    alert("檔案最大為3M");
                    $("#uploadify").uploadifyClearQueue();
                }
            },
            'onQueueFull': function (event, queueSizeLimit) {
                alert("最多上傳" + queueSizeLimit + "張圖片");
                return false;
            }
        });
    }
 

新建upload資料夾

SpringMVC配置檔案

服務端程式碼中實現圖片上傳使用的是MultipartFile類，需要在SpringMVC配置檔案中新增配置如下：

    <bean id="multipartResolver"    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="1000000"/>
        <property name="defaultEncoding" value="UTF-8"/>
    </bean>

圖片上傳處理程式碼

@RequestMapping("/upload")
    public String upload(HttpServletRequest request, HttpServletResponse response, @RequestParam("file") MultipartFile file) throws Exception {
        ServletContext sc = request.getSession().getServletContext();
        String dir = sc.getRealPath("/upload");
        String type = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1, file.getOriginalFilename().length());

        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");
        Random r = new Random();
        String imgName = "";
        if (type.equals("jpg")) {
            imgName = sdf.format(new Date()) + r.nextInt(100) + ".jpg";
        } else if (type.equals("png")) {
            imgName = sdf.format(new Date()) + r.nextInt(100) + ".png";
        } else if (type.equals("jpeg")) {
            imgName = sdf.format(new Date()) + r.nextInt(100) + ".jpeg";
        } else {
            return null;
        }
        FileUtils.writeByteArrayToFile(new File(dir, imgName), file.getBytes());
        //返回圖片的url，結合前端js回撥實現上傳並回顯的功能
        response.getWriter().print("upload/" + imgName);
        return null;
    }

SpringMVC圖片上傳，成功後非同步回傳url，上傳與實體儲存步驟分開。

//儲存到資料庫中
    function savePicture() {
        $("#fm").form("submit", {
            url: url,
            onSubmit: function () {
                return $(this).form("validate");
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.success) {
                    $.messager.alert("系統提示", "儲存成功");
                    $("#dlg").dialog("close");
                    $("#dg").datagrid("reload");
                    resetValue();
                } else {
                    $.messager.alert("系統提示", "儲存失敗");
                    window.location.reload();
                    return;
                }
            }
        });
    }

資料庫檔案

DROP TABLE IF EXISTS `ssm_picture`;

CREATE TABLE `ssm_picture` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `path` varchar(150) DEFAULT NULL,
  `type` int(11) DEFAULT NULL,
  `time` varchar(100) DEFAULT NULL,
  `url` varchar(200) DEFAULT NULL,
  `grade` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

LOCK TABLES `ssm_picture` WRITE;

UNLOCK TABLES;

結語

最近兩篇文章主要是增加了本專案的一些小功能點，如果有其他建議的話，也希望能留言或者發私信給我，如果感覺還可以的話，也會陸續的新增到專案中來。