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

Posted

技术标签:

【中文标题】使用 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 路绑定吗?我的意思是如果我在我的控制器中为文件设置一个值,它会在默认选择中显示该文件名吗?

以上是关于使用 ng-model 获取文件输入的指令 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS - 无法使用指令在 ng-model 中引用 $index

AngularJS - 创建一个使用 ng-model 的指令

在输入中过滤 ng-model

从输入类型=范围中获取值

AngularJs 指令

笔记之_java的angularjs整理