使用 ng-model 获取文件输入的指令 [重复]

Posted 2023-02-22

【中文标题】使用 ng-model 获取文件输入的指令 [重复]

【英文标题】：Directive to get files input with ng-model [duplicate]

【发布时间】：2017-08-21 05:11:17

【问题描述】：

Guyz，我的代码有问题，当我尝试从 <input ng-model="form.userfile" id="itemImage" name="userfile" type="file"> 获取文件时，我不知道为什么 该代码不会给我值。

我的代码：

html：

<div class="panel panel-default">
    <div class="panel-body">
    <form id="form" accept-charset="utf-8" ng-submit="sendmessage()">
        <textarea ng-model="form.message" name="message"
            onkeypress="process(event, this)"
            id="text" class="form-control send-message" rows="3"
            placeholder="Write a reply...">
        </textarea>

    </div>

    <span class="col-lg-3 btn btn-file send-message-btn">
        <i class="glyphicon glyphicon-paperclip"></i>Add Files
        <input ng-model="form.userfile" id="itemImage"
            name="userfile" type="file">
    </span>

    <button ng-click="sendmessage()" id="send"
         class="col-lg-4 text-right btn send-message-btn pull-right" 
         type="button" role="button">
       <i class="fa fa-plus"></i> Send Message
    </button>
    <div id="dvPreview" class="text-center"></div>
    </form>
</div>

角度：

$scope.sendmessage = function ()
        var formData = $scope.form;
        var friendid = $scope.friendid;
        var req =
            
                type: 'POST',
                enctype: 'multipart/form-data',
                data:formData,
                url: "<?php echo base_url() ?>User/sendmessages/"+friendid,
                headers: 
                    'Content-Type': 'application/json'
                ,

            ;
        $http(req).then(function (response) 
            $('#text').val('');
            console.log(response)
        , function (response) 

        );
    ;

这是我之前做过的事情，请帮忙。

【问题讨论】：

你上传的是什么文件？

png、jpeg 或任何类型的图像源。

该代码只给我 textarea 值，但文件始终为空。

【参考方案1】：

ngModel 指令不能用于文件输入。

如果您不关心在 prod 上处于 debugInfoEnabled 状态，您可以在 app.js 中像这样传递它。

$compileProvider.debugInfoEnabled(true);

然后您将能够从您的 html 访问您的范围。 在你的文件输入中添加：

onchange="angular.element(this).scope().yourChangeFunction(this)

您可以使用 js 代码访问您的文件：

scope.yourChangeFunction = function(element)scope.file=element.files[0];

【讨论】：

那请帮我怎么办？

抱歉，只编辑我的答案，发送太早了。

DOM 在 AngularJS 执行上下文之外调用 onchange 函数。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等。

这种方式可以进行 2 路绑定吗？我的意思是如果我在我的控制器中为文件设置一个值，它会在默认选择中显示该文件名吗？