在 bootbox 中输入 [file]答案

【问题标题】：Input [file] in bootbox在 bootbox 中输入 [file]
【发布时间】：2015-04-27 11:59:18
【问题描述】：

我正在尝试使用bootbox.dialog(...) 显示弹出窗口。在这个引导箱内，我想输入一个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());
                    }
                }
            }
        });

【问题讨论】：

标签： angularjs bootbox

【解决方案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());
            }
        }
    }
});

【讨论】：

【解决方案2】：

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

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

Detail.

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

这将帮助您： File Upload using AngularJS

【讨论】：

我如何获得这个文件路径？