对上传图片控件uploadify进行二次封装

申明：这里只写出js代码，最终效果需css配合，不是本文讨论的重点，所以此处不贴出。

1.封装的js代码

$.fn.uploadityPackage = function (options) {
    // default configuration properties
    var defaults = {
        imgContainerId: "imgContainer",
        closeClass: "show_close",
        hfImgId: "hfImg",
        imgList: [],
        uploadLimit: 5,
        prevCountId: "prevCount",
        nextCountId: "nextCount",
        fileUploadType: "",
        auto: true,
        multi: true,
        queueSizeLimit: 1,
        fileSizeLimit: "5MB",
        buttonText: "选择图片",
        disable: false
    };
    var options = $.extend(defaults, options);

    var $uploadify_dml = $(this);

    var imgContainerId = options.imgContainerId,
        closeClass = options.closeClass,
        hfImgId = options.hfImgId,
        imgList = options.imgList,
        uploadLimit = options.uploadLimit,
        uploadLimitDynamic = uploadLimit,
        prevCountId = options.prevCountId,
        nextCountId = options.nextCountId,
        fileUploadType = options.fileUploadType,
        auto = options.auto,
        multi = options.multi,
        queueSizeLimit = options.queueSizeLimit,
        fileSizeLimit = options.fileSizeLimit,
        buttonText = options.buttonText,
        disable = options.disable;

    //清空容器，并加入图片
    function setImage(imgContainerId, imgList) {
        $("#" + imgContainerId).empty();
        var l = imgList.length;
        if (l == 0) {
            return;
        }
        for (var i = 0; i < l; i++) {
            appendImg(imgContainerId, imgList[i]);
        }
    }

    //初始化
    if (imgList.length > 0) {
        setImage(imgContainerId, imgList);
        var l = imgList.length;
        countUploadNum(uploadLimit, l, prevCountId, nextCountId);
        uploadLimit = uploadLimit - l;//剩余可以上传的图片数量
    }

    //插入图片位置
    function appendImg(imgContainerId, url) {
        $("#" + imgContainerId).append('<div class="show_box"><img src="' + url + '"><span class="show_close"></span></div>');
    }
    //计算可以上传的图片数量
    function countUploadNum(total, curNum, prevId, nextId) {
        $("#" + prevCountId).html(curNum);
        $("#" + nextCountId).html(total - curNum);
    }
    //删除数组中的数据
    function deleteArrayByParams(imgList, url) {
        for (var i = 0, l = imgList.length; i < l; i++) {
            if (imgList[i] == url || imgList[i] == "http://" + location.host + url) {
                imgList.splice(i, 1);
                break;
            }
        }
    }
    //删除图片
    $("#" + imgContainerId + " ." + closeClass).live('click', function () {
        if (confirm("确定删除该项目图片吗？")) {
            var me = $(this),
                url = me.siblings('img').attr('src'),
                id = me.parent().parent().attr('id');
            me.parent().hide();

            deleteArrayByParams(imgList, url);

            if (imgList.length > 0) {
                $("#" + hfImgId).val(imgList.join(","));
            } else {
                $("#" + hfImgId).val('');
            }

            if (imgList.length < uploadLimit) {
                $uploadify_dml.uploadify('disable', false);
                //为避免达到上传数量，再删除图片后，上传无限制的BUG，添加uploadLimitDynamic，用于uploadify中的uploadLimit1不再此处增加数量
                uploadLimitDynamic += 1;
                $uploadify_dml.uploadify('settings', 'uploadLimit', uploadLimitDynamic);
            }
        }
    });

    //uploadfify的调用方法
    $uploadify_dml.uploadify({
        'swf': '/JS/uploadify_v3.1/uploadify.swf',
        'fileObjName': 'Filedata',
        'uploader': '/Api/swfUpload.ashx',
        'buttonText': buttonText,
        'removeCompleted': true,
        'queueID': 'fileQueue1',
        'formData': { 'TYPE': fileUploadType },
        'auto': auto,
        'multi': multi,
        'queueSizeLimit': queueSizeLimit,
        'uploadLimit': uploadLimit,
        'fileTypeExts': '*.jpg;*.jpeg;*.png;*.gif;',
        'fileTypeDesc': '请选择jpg,jpeg,png,gif,格式图片',
        'fileSizeLimit': fileSizeLimit,
        'onUploadSuccess': function (file, data, response) {
            if (response) {
                var jsonData = $.parseJSON(data);
                if (jsonData.errorCode == 1) {
                    var url = jsonData.msg;
                    imgList.push("http://" + location.host + url);
                    var l = imgList.length;
                    countUploadNum(uploadLimit, l, prevCountId, nextCountId);
                    $("#" + hfImgId).val(imgList.join(","));
                    appendImg(imgContainerId, url);
                    if (l == uploadLimit) {
                        $uploadify_dml.uploadify('disable', true);
                    }
                } else {
                    alert(jsonData.msg);
                }
            }
        },
        'onUploadError': function (file, errorCode, errorMsg, errorString) {
            alert("文件名：" + file.name + "\r\n" + "错误:" + errorString + "," + errorMsg);
        },
        'onSelectError': function (errorCode) {
            alert('这个文件 ' + file.name + ' 超过10M的大小了！');
        }
    });

    if (disable)
    {
        $uploadify_dml.uploadify('disable', true);
    }

}

2.调用方法

　　2.1静态标签：

 <input type="file" id="uploadify_dml1" />
 <div class="pic_show" id="imgContainer1"></div>
 <input type="hidden" id="hfBrandLogo" name="hfBrandLogo" value="<%=BrandLogo %>" />
 <span class="c999" style="font-size: 12px;">注：仅限上传一个LOGO</span>

 

　　2.2调用方法

$("#uploadify_dml1").uploadityPackage({
            imgContainerId: "imgContainer1",
            hfImgId: "hfBrandLogo",
            imgList: [<%= Maticsoft.Common.StringPlus.ImgStrToArrayStrAndAddHttp(BrandLogo,',')%>],
            uploadLimit: 1,
            multi: false,
            fileUploadType: "BrandJoinLogo"
        });

 

3.后台api图片处理处省略。

 

最终结果：

点击右上角X可以删除图片，重新上传。