热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

bootstrapfileinput当前页面多次初始化为什么不生效?

bootstrapfileinput当前页面多次初始化只有第一次生效,第二次不生效functioninitFileInput(ctrlName,uploadUr

bootstrap fileinput 当前页面多次初始化只有第一次生效,第二次不生效

function initFileInput(ctrlName, uploadUrl, oldImgUrl) {



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var oldImgUrls = new Array();

var urls = new Array();

if (oldImgUrl != null) {

    var a = {caption: oldImgUrl, downloadUrl: oldImgUrl, width: "120px", key: 1}

    oldImgUrls.push(a)

    urls.push(oldImgUrl)

}

var cOntrol= $('#' + ctrlName);

control.fileinput({

    theme: "fa",//主题

    uploadUrl: uploadUrl,

    initialPreview: urls,

    initialPreviewAsData: true,

    initialPreviewConfig: oldImgUrls,

    allowedFileExtensions: ["png", "jpg", "gif", "jpeg"],

    overwriteInitial: true,//再次点击覆盖

    showUpload: false, //是否显示上传按钮

    maxFileCount: 1,//最大上传个数

}).on('fileuploaded', function (event, data, previewId, index) {

    vm.bsaNews.imgUrl = (data.response.content);

}).on("filebatchselected", function (event, files) {

    $(this).fileinput("upload");

});

}

var ue = UE.getEditor('editor');
var vm = new Vue({



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
el: '#rrapp',

data: {

    showList: true,

    title: null,

    bsaNews: {},

    newsTypes: {}

},

created(){

    this.getNewsType()

},

methods: {

    query: function () {

        vm.reload();

    },

    add: function () {

        vm.showList = false;

        vm.title = "新增";

        vm.bsaNews = {"type":0};

        initFileInput("input-b1", baseURL + 'upload/fdsimg', null);

        ue.setContent("")

        $(".fileinput-remove-button").click();

    },

    update: function (event) {

        var id = getSelectedRow();

        if (id == null) {

            return;

        }

        vm.showList = false;

        vm.title = "修改";



        vm.getInfo(id)

    },

    saveOrUpdate: function (event) {

        $('#btnSaveOrUpdate').button('loading').delay(1000).queue(function () {

            var url = vm.bsaNews.id == null ? "sys/bsanews/save" : "sys/bsanews/update";

            vm.bsaNews.detail = ue.getContent();

            ue.setContent("")

            $.ajax({

                type: "POST",

                url: baseURL + url,

                contentType: "application/json",

                data: JSON.stringify(vm.bsaNews),

                success: function (r) {

                    if (r.code === 0) {

                        layer.msg("操作成功", {icon: 1});

                        vm.reload();

                        $('#btnSaveOrUpdate').button('reset');

                        $('#btnSaveOrUpdate').dequeue();

                    } else {

                        layer.alert(r.msg);

                        $('#btnSaveOrUpdate').button('reset');

                        $('#btnSaveOrUpdate').dequeue();

                    }

                }

            });

        });

    },

    del: function (event) {

        var ids = getSelectedRows();

        if (ids == null) {

            return;

        }

        var lock = false;

        layer.confirm('确定要删除选中的记录?', {

            btn: ['确定', '取消'] //按钮

        }, function () {

            if (!lock) {

                lock = true;

                $.ajax({

                    type: "POST",

                    url: baseURL + "sys/bsanews/delete",

                    contentType: "application/json",

                    data: JSON.stringify(ids),

                    success: function (r) {

                        if (r.code == 0) {

                            layer.msg("操作成功", {icon: 1});

                            $("#jqGrid").trigger("reloadGrid");

                        } else {

                            layer.alert(r.msg);

                        }

                    }

                });

            }

        }, function () {

        });

    },

    getInfo: function (id) {

        $.get(baseURL + "sys/bsanews/info/" + id, function (r) {

            vm.bsaNews = r.bsaNews;

            initFileInput("input-b1", baseURL + 'upload/fdsimg', vm.bsaNews.imgUrl);

            ue.setContent(vm.bsaNews.detail)

        });

    },

    reload: function (event) {

        vm.showList = true;

        var page = $("#jqGrid").jqGrid('getGridParam', 'page');

        $("#jqGrid").jqGrid('setGridParam', {

            page: 1

        }).trigger("reloadGrid");

    },

    getNewsType: function (event) {

        $.ajax({

            type: "POST",

            url: baseURL+"bsa/dict/getListByType",

            contentType: "application/json",

            data: JSON.stringify({"type":"news_type"}),

            success: function(result){

                if(result.code == 0){//登录成功

                    vm.newsTypes=result.content

                }else{

                    alert(result.msg)

                }

            }

        });

    }

}

});


   



推荐阅读
  • 深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]
  • 本文介绍了在 Java 编程中遇到的一个常见错误:对象无法转换为 long 类型,并提供了详细的解决方案。 ... [详细]
  • Ihavetwomethodsofgeneratingmdistinctrandomnumbersintherange[0..n-1]我有两种方法在范围[0.n-1]中生 ... [详细]
  • 微信公众号推送模板40036问题
    返回码错误码描述说明40001invalidcredential不合法的调用凭证40002invalidgrant_type不合法的grant_type40003invalidop ... [详细]
  • 如何在Java中使用DButils类
    这期内容当中小编将会给大家带来有关如何在Java中使用DButils类,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。D ... [详细]
  • 本文详细介绍了MySQL数据库的基础语法与核心操作,涵盖从基础概念到具体应用的多个方面。首先,文章从基础知识入手,逐步深入到创建和修改数据表的操作。接着,详细讲解了如何进行数据的插入、更新与删除。在查询部分,不仅介绍了DISTINCT和LIMIT的使用方法,还探讨了排序、过滤和通配符的应用。此外,文章还涵盖了计算字段以及多种函数的使用,包括文本处理、日期和时间处理及数值处理等。通过这些内容,读者可以全面掌握MySQL数据库的核心操作技巧。 ... [详细]
  • 在尝试对 QQmlPropertyMap 类进行测试驱动开发时,发现其派生类中无法正常调用槽函数或 Q_INVOKABLE 方法。这可能是由于 QQmlPropertyMap 的内部实现机制导致的,需要进一步研究以找到解决方案。 ... [详细]
  • 本文介绍了如何利用Struts1框架构建一个简易的四则运算计算器。通过采用DispatchAction来处理不同类型的计算请求,并使用动态Form来优化开发流程,确保代码的简洁性和可维护性。同时,系统提供了用户友好的错误提示,以增强用户体验。 ... [详细]
  • Python 程序转换为 EXE 文件:详细解析 .py 脚本打包成独立可执行文件的方法与技巧
    在开发了几个简单的爬虫 Python 程序后,我决定将其封装成独立的可执行文件以便于分发和使用。为了实现这一目标,首先需要解决的是如何将 Python 脚本转换为 EXE 文件。在这个过程中,我选择了 Qt 作为 GUI 框架,因为之前对此并不熟悉,希望通过这个项目进一步学习和掌握 Qt 的基本用法。本文将详细介绍从 .py 脚本到 EXE 文件的整个过程,包括所需工具、具体步骤以及常见问题的解决方案。 ... [详细]
  • 本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言,从a.html页面跳转至b.html时,如何携带参数并使b.html替代当前页面显示,而非新开窗口。文中详细介绍了实现这一功能的代码及注释,帮助开发者更好地理解和应用该技术。 ... [详细]
  • 本文详细介绍了一种利用 ESP8266 01S 模块构建 Web 服务器的成功实践方案。通过具体的代码示例和详细的步骤说明,帮助读者快速掌握该模块的使用方法。在疫情期间,作者重新审视并研究了这一未被充分利用的模块,最终成功实现了 Web 服务器的功能。本文不仅提供了完整的代码实现,还涵盖了调试过程中遇到的常见问题及其解决方法,为初学者提供了宝贵的参考。 ... [详细]
  • 经过两天的努力,终于成功解决了半平面交模板题POJ3335的问题。原来是在`OnLeft`函数中漏掉了关键的等于号。通过这次训练,不仅加深了对半平面交算法的理解,还提升了调试和代码实现的能力。未来将继续深入研究计算几何的其他核心问题,进一步巩固和拓展相关知识。 ... [详细]
  • 在 Vue 应用开发中,页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式,帮助开发者高效地实现页面间的数据交互与状态同步,同时分享一些最佳实践和注意事项。 ... [详细]
  • 本文详细探讨了 jQuery 中 `ajaxSubmit` 方法的使用技巧及其应用场景。首先,介绍了如何正确引入必要的脚本文件,如 `jquery.form.js` 和 `jquery-1.8.0.min.js`。接着,通过具体示例展示了如何利用 `ajaxSubmit` 方法实现表单的异步提交,包括数据的发送、接收和处理。此外,还讨论了该方法在不同场景下的应用,如文件上传、表单验证和动态更新页面内容等,提供了丰富的代码示例和最佳实践建议。 ... [详细]
  • 优化后的摘要:默认情况下,PopupWindow在点击外部区域时会自动关闭。为了实现点击外部区域时不自动关闭的功能,可以通过自定义设置来调整PopupWindow的行为,确保其在外部点击时仍保持显示状态。这需要对PopupWindow的属性进行适当的修改和配置,以满足特定的交互需求。 ... [详细]
author-avatar
mobiledu2502855463
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有