使用 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