如何使用文件上传字段扩展 angular-xeditable 可编辑行

Posted 2023-02-23

【中文标题】如何使用文件上传字段扩展 angular-xeditable 可编辑行

【英文标题】：How to extend angular-xeditable editable row with file upload field

【发布时间】：2015-08-16 09:38:41

【问题描述】：

我正在尝试扩展（我的真实示例非常相似） angular-xeditable - 可编辑行 - 此处描述的示例： http://vitalets.github.io/angular-xeditable/#editable-row 或其 jsFiddle 链接在这里： http://jsfiddle.net/NfPcH/93/

这样我就有一个额外的列用于为每一行/项目上传文件。如果它可以只是类型文件的输入元素，那很好，但我愿意接受其他解决方案。通常，我的专栏是这样的：

                <td>
                    <span editable-text="template.description" e-name="description" e-form="rowform" e-required>
                         template.description || 'empty' 
                    </span>
                </td>

但是，现在我想添加我的自定义列，我在这里尝试了带有或不带有所有提及属性的输入元素：

                <td>

                    <input id="file"
                           accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                           ng-show="rowform.$visible"
                           class="btn btn-default"
                           name="file"
                           type="file"
                           e-name="file"
                           e-form="rowform"
                           value=" user.file || 'empty' " />
                </td>

在任何情况下，当执行此代码时，在尝试保存行后，我无法在我的角度控制器中获取 - 文件 - 值：

    $scope.saveUser = function (data, id) 
        //$scope.user not updated yet
        angular.extend(data,  id: id );
        angular.extend(data,  file: file );
        return $http.post('/saveUser', data);
    ;

我的 - 数据 - 对象包含所有其他属性，例如 - 描述 - 但不包含 - 文件 - 属性！

当然，我扩展了表单 onbeforesave 事件：

... form editable-form name="rowform" onbeforesave="saveTemplate($data, user.id, user.file)" ...

有什么建议吗？

谢谢， 韦德兰

【参考方案1】：

我被这个困住了。

当我认为一切都很好时，因为我通过使用此处提到的创建自定义指令的解决方案在我的角度模型中获得了文件对象：

ng-model for <input type="file"/>

...然后新问题开始困扰我。

我无法在绑定过程中将此文件对象映射到 MVC 控制器的 HttpPostedFileBase 参数。

我尝试了所有方法，例如排除属性并向我的 MVC 控制器添加单独的参数，或创建自定义 MVC 模型绑定器，但我看到的示例使用了 ModelBinderResult 类，我在任何命名空间的 MVC 5 类下都找不到该类。

这个 File 对象肯定在这里，但我无法让它工作。我知道 object 不是空的或 null，因为如果我指定控制器的输入参数的类型 => object，那么它就不是 null。

拜托，我们非常欢迎任何帮助！

韦德兰

【讨论】：

有人找到解决办法了吗？