使用ng-model获取文件输入的指令 [英] Directive to get files input with ng-model

问题描述

Guyz我的代码有问题我不知道为什么当我试图从< input ng-model =form.userfileid =itemImagename =获取文件时userfiletype =file>
该代码不会给我这些值。

Guyz i have an issue with my code i don't know why when i tried to get file from <input ng-model="form.userfile" id="itemImage" name="userfile" type="file"> that code will not give me the values.

我的代码：

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>

Angular：

$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) {

        });
    };

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

here is what i have done before please help.

推荐答案

ngModel指令在文件输入时不可用。

ngModel directive is not usable on file input.

如果你不关心prod上的debugInfoEnabled，你可以在你的app.js中将它传递给它。

If you don't care about being in debugInfoEnabled on prod, you can pass it true like this in your app.js.

$compileProvider.debugInfoEnabled(true);

然后，您就可以从html访问您的范围了。
在你的文件输入中只需添加：

You then will be able to access your scope from your html. In you file input just add :

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

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

You can access your file in your js code with :

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

这篇关于使用ng-model获取文件输入的指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！