Question

我正在尝试使用bootbox.dialog(...)显示弹出式窗口。在这个bootbox中，我想放一个input type="file"并检索上传的文件。如何获取上传的文件？

BOOTBOX （在我的AngularJS控制器中）

 bootbox.dialog({
            title: "More information",
            message: '<div class="row"> ' +
                '<div class="col-md12"> ' +
                '<form class="form-horizontal"> ' +

                    '<div class="form-group">' +
                        '<label class="col-md-3 control-label" for="logo">Logo</label> ' +
                        '<div class="col-md-4">' +
                            '<img id="logo" name="logo" class="customerImg"/>' +
                        '</div>' +
                        '<span class="btn btn-default btn-file col-md-3">Browse another logo<input type="file" fileread="customerLogo" />' +
                    '</div>' +

                '</form>' +
                '</div>' +
                '</div>',
            buttons: {
                danger: {
                    label: "Cancel",
                    className: "btn btn-primary"
                },
                success: {
                    label: "Generate word",
                    className: "btn btn-primary",
                    callback: function () {
                        console.log(document.getElementById('logo').val());
                    }
                }
            }
        });

Answer 1

这与您的问题并不完全相关，但您也可以为您的表单使用模板（通过<script type="text/template">标记）;它会使你当前模板中的一些错误更加明显（你错过了一个结束的跨度，其中一个BS类缺少一个连字符）。这是一个例子：https://jsfiddle.net/fLaa0p4d/

模板

<script type="text/template" id="file-template">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="col-md-3 control-label" for="logo">Logo</label>
                    <div class="col-md-4">
                        <img id="logo" name="logo" class="customerImg"/>
                    </div>
                    <span class="btn btn-default btn-file col-md-3">
                        Browse another logo
                        <input type="file" name="imageFile" fileread="customerLogo" />
                    </span>
                </div>
            </form>
        </div>
    </div>
</script>

调整后的脚本

bootbox.dialog({
    title: "More information",
    message: $('#file-template').html(),
    buttons: {
        danger: {
            label: "Cancel",
            className: "btn btn-primary"
        },
        success: {
            label: "Generate word",
            className: "btn btn-primary",
            callback: function () {
                console.log(document.getElementById('logo').val());
            }
        }
    }
});

Answer 2

不允许使用Ng输入文件使用ng-model。

并非所有提供的功能都适用于所有输入类型。具体而言，输入[文件]不支持通过ng-model进行数据绑定和事件处理。

Detail

您可以使用文件路径并使用Jquery文件上传功能。

这将有助于您： File Upload using AngularJS

在bootbox中输入[file]

2 个答案:

模板

调整后的脚本