使用ng-model获取文件输入的指令

时间:2017-03-28 08:23:35

标签: javascript php angularjs angular-directive

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

        });
    };

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

1 个答案:

答案 0 :(得分:0)

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];}