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

问题描述

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

我的代码:

HTML:

<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="写回复..."></textarea>
<span class="col-lg-3 btn btn-file send-message-btn"><i class="glyphicon glyphicon-paperclip"></i>添加文件<input ng-model="form.userfile" id="itemImage"名称=用户文件"类型=文件"></span><button ng-click="sendmessage()" id="send"class="col-lg-4 text-right btn send-message-btn pull-right"类型=按钮"角色=按钮"><i class="fa fa-plus"></i>发信息<div id="dvPreview" class="text-center"></div></表单>

角度:

$scope.sendmessage = function (){var formData = $scope.form;varfriendid = $scope.friendid;变量请求 ={类型:'POST'，enctype: 'multipart/form-data',数据:表单数据，url: "<?php echo base_url() ?>User/sendmessages/"+friendid,标题:{'内容类型':'应用程序/json'},};$http(req).then(function (response) {$('#text').val('');控制台日志(响应)}, 函数(响应){});};

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

解决方案

ngModel 指令不可用于文件输入.

如果您不关心在 prod 上是否处于 debugInfoEnabled，您可以在 app.js 中像这样将其传递为 true.

$compileProvider.debugInfoEnabled(true);

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

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

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

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

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.

my code:

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 directive is not usable on file input.

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

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)

You can access your file in your js code with :

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

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