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) { }); };
вот что я сделал, прежде чем помогать.
ng-model Угловая встроенная директива <input> не поддерживает <input type=file> . Для этого нужна индивидуальная директива.
<input type="file" files-input ng-model="fileArray" multiple>
Директива files-input :
angular.module("app").directive("filesInput", function() { return { require: "ngModel", link: function postLink(scope,elem,attrs,ngModel) { elem.on("change", function(e) { var files = elem[0].files; ngModel.$setViewValue(files); }) } } })
Вышеуказанная директива добавляет слушателя изменений, который обновляет модель с помощью свойства files input элемента.
Эта директива позволяет <input type=file> автоматически работать с директивами ng-change и ng-form .
ДЕМО на PLNKR
files-input angular.module("app",[]); angular.module("app").directive("filesInput", function() { return { require: "ngModel", link: function postLink(scope,elem,attrs,ngModel) { elem.on("change", function(e) { var files = elem[0].files; ngModel.$setViewValue(files); }) } } });
<script src="//unpkg.com/angular/angular.js"></script> <body ng-app="app"> <h1>AngularJS Input `type=file` Demo</h1> <input type="file" files-input ng-model="fileArray" multiple> <h2>Files</h2> <div ng-repeat="file in fileArray"> {{file.name}} </div> </body>
Директива ngModel не может использоваться для ввода файлов.
Если вы не заботитесь о том, чтобы быть в debugInfoEnabled на prod, вы можете передать его так же, как это, в вашем приложении app.js.
$compileProvider.debugInfoEnabled(true);
Затем вы сможете получить доступ к своей области из своего html. В вашем входе файла просто добавьте:
onchange="angular.element(this).scope().yourChangeFunction(this)
Вы можете получить доступ к своему файлу в js-коде с помощью:
scope.yourChangeFunction = function(element){scope.file=element.files[0];}