javascript - js 中this 调用封装 封装中的this指向外部内容 如何让封装函数内部也指向这个外部内容
PHPz
PHPz 2017-04-11 10:55:19
[JavaScript讨论组]

封装的如下

$.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 urlCount = fileUrls.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="' + fileUrls[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);
    var itemSelect =$(".imgShow[src='"+imgUrl+"']").closest(".jFiler-item");
    itemSelect.fadeOut();
    itemSelect.remove();
});

$(this).filer({
    extensions: option.fileTypes,
    limit:option.maxCount,
    fileMaxSize: option.fileSize,

    // 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;
                $(".jFiler .jFiler-item-thumb").append("<p class='jFiler-item-thumb-image'> <img class='imgShow' src='" + imgUrl + "'> </p>");
                success(imgUrl)
            }
            else {
                common.alert(data.Message);
            }
        }
    },
    onFileCheck:function () {
        console.log($(this).find(".jFiler").find(".jFiler-item").length)
        var filesCount=$(".jFiler-item",container).length+$(this).find(".jFiler").find(".jFiler-item").length;

        if(filesCount>=option.maxCount){
            alert("现文件数量已大于等于限制("+option.maxCount+"),不能继续上传,可进行删除操作");
            return false
        }
        return true
    },
    dragDrop: {
        dragEnter: null,
        dragLeave: null,
        drop: null,
        dragContainer: null
    },
    addMore: false,
    allowDuplicates: false,
    onRemove: function(itemEl){
        // var imgUrl=$(itemEl).closest(".jFiler-item").find("img").attr("src");
        // deleteFiles(imgUrl)
    },
    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:"您所选取的文件太大! 请选取 小于{{fi-maxSize}} MB.的文件",
            filesSizeAll: "您所选取的文件太大! 请选取 小于{{fi-maxSize}} MB.的文件"
        }
    }
});

}



在外面这么调用
  $("#fileQueue").uploadFiles($("#imgContainer"),fileUrls,success(),deleteFiles())
  那么

这个this则指向fileQueue 怎么能让filer中各回调的this也指向filQueue

PHPz
PHPz

学习是最好的投资!

全部回复(1)
PHP中文网

具体参考call()的用法

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号