javascript - jquer.filer插件封装 图片数量参数值由外部参数传进来 插件初试一次 参数计算不更新如何解决
高洛峰
高洛峰 2017-04-11 10:46:41
0
0
710

这是我自己封装的插件

$.fn.uploadFiles=function (container,fileUrls,success,deleteFiles, option) {

    if(typeof option === 'undefined')
    {
        option = {};
    }

        option = {
            fileTypes:option.fileTypes || ['jpeg', 'png', 'jpg', 'gif'],

            maxCount: option.maxCount || 5,

            fileSize: option.fileSize || 10
        };

    if(fileUrls!="") {
        var imgArr = fileUrls.split(" ");
        var urlCount = imgArr.length;
        if(option.maxCount-urlCount>0){}
        $(container).empty();
        container.append('<p class="jFiler-items jFiler-row"><ul class="jFiler-items-list jFiler-items-grid" style="clear: both;text-align: left;"></ul></p>')
        for (var i = 0; i < urlCount; i++) {
            container.find(".jFiler-items-list").append(' <li class="jFiler-item">\
                                                        <p class="jFiler-item-container">\
                                                             <p class="jFiler-item-inner">\
                                                                     <p class="jFiler-item-thumb">\
                                                                     <p class="jFiler-item-status"></p>\
                                                                     <p class="jFiler-item-thumb-image">\
                                                                         <img class="imgShow" src="' + imgArr[i] + '">\
                                                                         </p>\
                                                                     </p>\
                                                                     <p class="jFiler-item-assets jFiler-row">\
                                                                         <ul class="list-inline pull-right">\
                                                                             <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                                                         </ul>\
                                                                     </p>\
                                                                </p>\
                                                              </p>\
                                                        </li>')
        }
    }

    container.find(".jFiler-item-trash-action").click(function () {
        var imgUrl=$(this).parents(".jFiler-item").find(".imgShow").attr("src")
        deleteFiles(imgUrl)
        urlCount--
    });
    var limit=function () {
        if(option.maxCount - urlCount>0){
            return option.maxCount - urlCount
        }
        else
            return 0
    }

    $(this).filer({
        extensions: option.fileTypes,
        limit:limit(),
        fileMaxSize: option.fileSize,
        maxSize: option.fileSize * (option.maxCount - urlCount),
        // changeInput: '<p class="jFiler-input-dragDrop" style="float: left;width:30%;padding: 10px 0px;background: none;border-radius: 4px"><p class="jFiler-input-inner"><p class="jFiler-input-text"><h3>将文件拖放至此</h3> <span style="display:inline-block; margin: 4px 0">or</span></p><a class="jFiler-input-choose-btn btn-de' +
        // '">浏览文件</a></p></p>',
        showThumbs: true,
        // theme: "dragdropbox",
        templates: {
            box: '<ul class="jFiler-items-list jFiler-items-grid" style="clear: both;text-align: left;"></ul>',
            item: '<li class="jFiler-item" style="display: inline-block;margin-left: 1%">\
                        <p class="jFiler-item-container">\
                            <p class="jFiler-item-inner">\
                                <p class="jFiler-item-thumb">\
                                    <p class="jFiler-item-status"></p>\
                                    <p class="jFiler-item-thumb-overlay">\
                                        <p class="jFiler-item-info">\
                                            <p style="display:table-cell;vertical-align: middle;">\
                                                <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>\
                                                <span class="jFiler-item-others">{{fi-size2}}</span>\
                                            </p>\
                                        </p>\
                                    </p>\
                                </p>\
                                <p class="jFiler-item-assets jFiler-row">\
                                    <ul class="list-inline pull-right">\
                                        <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                    </ul>\
                                </p>\
                            </p>\
                        </p>\
                    </li>',
            itemAppend: '<li class="jFiler-item">\
                            <p class="jFiler-item-container">\
                                <p class="jFiler-item-inner">\
                                    <p class="jFiler-item-thumb">\
                                        <p class="jFiler-item-status"></p>\
                                        <p class="jFiler-item-thumb-overlay">\
                                            <p class="jFiler-item-info">\
                                                <p style="display:table-cell;vertical-align: middle;">\
                                                    <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>\
                                                    <span class="jFiler-item-others">{{fi-size2}}</span>\
                                                </p>\
                                            </p>\
                                        </p>\
                                    </p>\
                                    <p class="jFiler-item-assets jFiler-row">\
                                        <ul class="list-inline pull-right">\
                                            <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                        </ul>\
                                    </p>\
                                </p>\
                            </p>\
                        </li>',
            progressBar: '<p class="bar"></p>',
            itemAppendToEnd: false,
            canvasImage: true,
            removeConfirmation: true,
            _selectors: {
                list: '.jFiler-items-list',
                item: '.jFiler-item',
                progressBar: '.bar',
                remove: '.jFiler-item-trash-action'
            }
        },
        uploadFile: {
            url:"/res/image/Upload?_ajaxcalltype=1",
            data: null,
            type: 'POST',
            enctype: 'multipart/form-data',
            synchron: true,
            beforeSend: function () { },

            success: function (data) {
                data = JSON.parse(data);
                if (data.Success) {
                    var imgUrl = data.Data.Url;
                    success(imgUrl)
                }
                else {
                    common.alert(data.Message);
                }
            }
        },
        onFileCheck:function () {
            urlCount=$(".jFiler-item").length
            return true
        },
        dragDrop: {
            dragEnter: null,
            dragLeave: null,
            drop: null,
            dragContainer: null
        },
        addMore: false,
        allowDuplicates: true,
        onRemove: function(itemEl){
            var imgUrl=$(itemEl).closest(".jFiler-item").find("img").attr("src");
            deleteFiles(imgUrl)
            urlCount=$(".jFiler-item").length
        },
        dialogs: {
            alert: function (text) {
                return alert(text);
            },
            confirm: function (text, callback) {
                confirm(text) ? callback() : null;
            }
        },
        captions: {
            removeConfirmation: "确定要移除文件么?",
            errors: {
                filesLimit: "现在文件数量已大于等于限制("+option.maxCount+"),不能继续上传,可进行删除操作",
                filesType: "文件格式出错,只支持"+option.fileTypes+"上传",
                filesSize: function () {
                    if("{{fi-limit}}">0){
                        return "{{fi-name}} 文件太大! 请选取小于 {{fi-fileMaxSize}} MB的文件"
                    }
                    else
                    {
                        return "现在文件数量已大于限制("+option.maxCount+"),不能继续上传,可进行删除操作"
                    }
                },
                filesSizeAll: "您所选取的文件太大! 请选取 小于{{fi-maxSize}} MB.的文件"
            }
        }
    });

}

回调参数

 var option={
            maxCount:2
        }
        var fileUrls = $("#Images").val().trim();
        $("#fileQueue").uploadFiles($("#imgContainer"),fileUrls,success(),deleteFiles(),option)
    
    });

function deleteFiles() {
return function (imgUrl) {
    var itemSelect =$(".imgShow[src='"+imgUrl+"']").closest(".jFiler-item")
    var fileUrls = $("#Images").val();
    fileUrls = fileUrls.replace(imgUrl, "").replace("  ", " ").trim();
    $("#Images").val(fileUrls);
    itemSelect.fadeOut();
    itemSelect.remove()
}
}

function success() {
    return function (imgUrl) {
        $(".jFiler .jFiler-item-thumb").append("<p class='jFiler-item-thumb-image'> <img class='imgShow' src='" + imgUrl + "'> </p>");
        var images = $("#Images").val();
        $("#Images").val(images + " " + imgUrl);
    }
    }

html

            

<input type="file" name="files[]" id="fileQueue" multiple="multiple" style="width: 30%">

            <p id="imgContainer"></p>

封装中最开始是已上传的图片的展示,把隐藏域中传进去的url取出来也就是fileUrls当做参数传进去用来生成已上传的图片的展示

这样取的图片限定数量,可是现在这种情况下 删除已经上传的图片计算出的能上传的图片数量并不会变 因为插件初始一次 这样我限定两张删除一张可插件仍认为我有两张提示不能上传 如何解决

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

Antworte allen(0)
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage