easyui 圖片上傳功能詳解

頁面展現：

 

　　一、點擊圖片上傳 跳轉頁面 攜帶2個參數  ID  NAME=所屬模塊  

　　　　jsp 如圖：

　　js  能夠上傳文件和圖片代碼:

　　$(function() {
var falg=0;
    $list = $('#thelist');
    var uploader = WebUploader.create({
        // 選完文件後，是否自動上傳。
        auto : false,
        // swf文件路徑
        swf : 'plugins/expand/webuploader/Uploadify.swf',
        // 文件接收服務端。
        server : 'commAction_saveFile',//url
        // 選擇文件的按鈕。可選。
        // 內部根據當前運行是建立，多是input元素，也多是flash.
        pick : '#picker',
        // 只容許選擇圖片文件。
        formData : {
            belongId : $('#belongId').val(),
            belongMode : $('#belongMode').val()
        }
    });
    uploader.on('fileQueued', function(file) {
        $list.append('<div id="' + file.id + '" class="item">'
                + '<h4 class="info">' + file.name + '</h4>'
                + '<p class="state">等待上傳...</p>' + '</div>');
                var belongMode=$('#belongMode').val();
                //只有是發票登記的時候 只能上傳圖片
            if(belongMode=='發票登記'){
                var fileName=file.name;//獲取上傳圖片的名稱
                //判斷是否是圖片
                var fileType = fileName.substring(fileName.lastIndexOf(".") +1,fileName.length);
                if (fileType == 'png'
                                                || fileType == 'jpg'
                                                || fileType == 'jpeg'
                                                || fileType == 'gif'
                                                || fileType == 'bmp'
                                                || fileType == 'raw'){
                                                falg=0;
                }else{
                    $.messager.alert('錯誤提示', "請選擇一張圖片上傳", 'error')
                    falg=1;
                    return;
                    }
                }
                
    })
    
    // 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。
    uploader.on('uploadSuccess', function(file, response) {
        $('#' + file.id).addClass('upload-state-done');
        switch (response.flag) {
        case 0:
            closeWin();
            break;
        case 1:
            $.messager.alert('錯誤提示', response.info, 'error')
            break
        }
    });
    $('#save').on('click', function() {
    //判斷是否是圖片
    if(falg==1){
        return;
    }
        uploader.upload();
    });

})

根據url 到Action 代碼：

最後就是將數據存在數據庫。