angular 文件上传ng-change无效

最新推荐文章于 2022-03-18 14:44:55 发布
最新推荐文章于 2022-03-18 14:44:55 发布
阅读量764 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zy_crazy_code/article/details/81670815
本文介绍了一种在AngularJS中解决文件上传时ng-onChange事件无效的问题。通过使用HTML的onchange属性，并结合AngularJS的scope来触发自定义函数changeFn，实现了文件选择后的响应处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

angular.js 文件上传ng-onChange无效

html改用onchange方法如下

<input type='file' onchange = "angular.element(this).scope().changeFn(this.files)">

js方法

$scope.changeFn =function(obj){

    var fileName  = obj[0].name;

    .....

}

Angular必问面试题及参考答案
大模型大数据攻城狮的专栏
05-19 1023
Angular是一个由Google维护的开源前端框架，用于构建动态的Web应用程序。它是基于TypeScript编写的，并且提供了一整套解决方案，包括数据绑定、路由、表单处理、HTTP客户端等。Angular使用组件化架构，使得开发者可以创建可重用的组件，这些组件可以封装模板、样式和逻辑。特点：组件化：Angular的组件化架构允许开发者将应用拆分成多个小的、独立的组件，每个组件都有自己的视图和逻辑。双向数据绑定：Angular提供了一个强大的数据绑定机制，允许开发者在模型和视图之间同步数据。
input文件上传ng-change失效
weixin_39407291的博客
07-17 295
<input type="file" id="excelFile" onchange="angular.element(this).scope().chooseFile()"> ng-change没反应，这里在网上搜索了一下，采用上面的方式，奏效。
angular input file的ngchange方法不生效
殇蓝的博客
06-25 1616
1.第一种使用onchange来想办法覆盖原方法（推荐，适合页面上有多个地方上传图片，方法只用写一个） angular input file ngchange方法不生效,可以使用onchange来想办法覆盖原方法 onchange=”angular.element(this).scope().uploadImage(this.files)” uploadImage是$scope定义的方法，t...
AngularJS上传文件
啦啦啦啦 la
02-26 1万+
使用AngularJS上传文件 前台是Angular页面 后台使用SpringBoot/SpirngMVC 上传文件 html &lt;div&gt; &lt;input id="fileUpload" type="file" /&gt; &lt;button ng-click="uploadFile()"&gt;上传&lt;/button&
angularJs file ng-change无效及上传后清空选中的文件
qq_27868533的博客
08-14 2379
file ng-chanage失效 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Angular对应 onchange 事件的指令是 ng-chanage ，但是在input[type = file] 时 ng-change 是无效的。 原因： ng-change 要与 ng-model 一起使用，但是对于file来讲， ng-model 无...
input on-change事件触发失效和重复上传相同文件失效bug
05-14 4015
问题1： 在使用angularJs情况下， 使用input标签 配合 ng-change 无效，为什么原生的 input的onchange事件有效？ 问题2： 使用input标签 文件上传svg之后，然后再上传用同一个svg文件，没有任何反应? 问题1: 原因：首先 ng-change事件要与ng-model绑定，但是在input type类型为file的时候ng-change是无效,所以我们可以这样写 <input type="file" class="inputBtn" accept="image
解决angularJS中input标签的ng-change事件无效问题
10-18
这不仅解决了`ng-change`无效的问题，还提供了处理文件选择事件的灵活性。 总结来说，`ng-change`在`<input type="file">`中的失效主要是因为浏览器的安全策略。通过结合原生的`onchange`事件和手动调用`$apply()`...
AngularJS监听ng-repeat渲染完成的方法
10-18
这个过程可能发生在Angular的下一个Digest周期，所以常规的DOM操作是无效的。 为了解决这个问题，作者引入了AngularJS的$timeout服务和自定义指令。$timeout是AngularJS提供的服务，它可以在当前执行栈完成后延迟...
记录angular8 ngModel双向绑定页面不生效问题
m0_60144841的博客
03-18 1238
框架：angular8 ui组件：NG-ZORRO 问题：switch开关，通过js改变开关状态，html视图不生效 代码： html: <nz-switch nzCheckedChildren="启动" nzUnCheckedChildren="停止" name="status" [nzDisabled]="isSwitchState[item.vname]" [nzLoading]="isSwitchState[item.vname]" [(n
AngularJs ng-change事件/指令
热门推荐
天马3798
09-17 5万+
定义和用法 ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。 ng-change 指令需要搭配 ng-model 指令使用。 AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。 ng-change 事
AngularJs ng-change事件/指令(转)
weixin_33802505的博客
11-26 879
定义和用法 ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。 ng-change 指令需要搭配 ng-model 指令使用。 AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。 ...
angular OnChange事件
weixin_30855099的博客
04-25 3735
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.compon...
angular input=file ng-change事件
dianchou8532的博客
10-25 1198
首先 ng-change事件要与ng-model绑定 但是 当input 的 type=file时 ngchange事件是失效的 我们可以用图中的onchange事件去代替 其次 如果想在这个change事件里面添加ctr里面绑定的值 也可以按照图中所写的angular.element(this).$scope().bindName 去直接绑定 转载于...
angularJS 如何绑定file表单的change？
SakuraLLj的专栏
11-22 4448
angularJS 如何绑定file表单的change？<input type="file" class="fm_file_h5" multiple accept="image/jpg,image.png" ng-model="upFiles" ng-change="change()"> //这样不起作用解决办法<input type="file" class="fm_file_h5" multip
angularJS中input标签的ng-change事件无效
公西雒的技术站
11-25 1万+
出现这个问题是因为input的type是file，这时如果用ng-change="()"是无效的。 解决方法：用onchange事件。 $scope.change= function () { }
angular上传文件到本地服务器,Angular文件上传示例
weixin_26824207的博客
08-06 2515
以下为Angular的文件上传示例，分为三个步骤。步骤一、创建HTML模板 (file-upload.component.html)简单的创建一个类型为file的input标签，input上添加change事件，用来监控文件的选择。Choose Fileid="file"(change)="handleFileInput($event.target.files)">步骤二：在TypeScri...
angular ng-change $event undefined
m0_37639199的博客
06-28 1762
今天用到ng-change事件，但是打印其$event时发现为undefined,网上找了些解释，以下为觉得解释的较为明白的。 ngChange is an directive, not an event-handler. The working is quite different. ngChange works by setting an scope.$watch, ngCl
angular6使用laydate时onchange事件无效的解决方法
kksw1121
11-20 2054
angular6使用laydate时onchange事件无效的解决方法 laydate控件绑定的input输入框不识别onchange事件，但laydate的回调中自带done方法可以识别input value的变化 当laydate日期控件的值清空，确定时都会触发done方法，该方法返回3个参数，分别是当前的value值，开始日期时间对象，结束日期时间对象 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值