easyui 图片上传功能详解

 

　　1、点击图片上传 跳转页面 携带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 代码：

最后就是将数据存在数据库。