AngularJS 双向绑定 <input type='file'>中文件名，文件内容

最新推荐文章于 2022-07-05 17:34:59 发布
最新推荐文章于 2022-07-05 17:34:59 发布
阅读量3.5k 收藏 1
点赞数 1
分类专栏： javascript系列 文章标签： input typefile file
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaolisha9232/article/details/56665437
版权
本文探讨了在AngularJS中如何通过ng-model双向绑定获取文件名，但指出文件内容无法直接通过ng-model获取。解决方案是利用onchange事件结合FileReader API读取文件内容，并在内容读取完成后通过脏检测更新界面。示例代码展示了如何在文件选择后更新文件名和内容到界面。
摘要由CSDN通过智能技术生成

通过ng-model获取文件名，文件内容无效，这里用的都是双向绑定，但是双向绑定时参数传过去是undefined或者为空 

<div  ng-controller="getFileCtrl" >  

           <input type="file"  ng-model="feupload" />{ {feupload}}          

</div>

（1）如何获取文件内容

最低0.47元/天 解锁文章
Tinatrista
关注
专栏目录
JavaScript 编写简单的 html input标签提交文件验证
AKGWSB 's blog
05-06 851
这里不会介绍如何传输文件如果您想了解文件是如何传输到服务器的 请进入传送门【Ajax实现简单图片文件异步上传并显示】 让用户提交文件永远是一件危险的事情，而提交之前的验证就显得必不可少了，而如果在文件提交到服务器端再验证，那么不仅具有一定的危险性，而且浪费了服务器宝贵的带宽来传输文件，使用JavaScript，在用户（的浏览器）提交文件之前，就验证文件的正确性，可以比较好的规避上述问题 html ...
Form 表 单( float: left；)
weixin_51847874的博客
01-10 250
误删（哭） 3.文本框 < input type=“text” /> 属性： name:定义控件名称 value：指定控件初始值 密码框 < input type=“password” /> 属性： name:定义控件名称 value：指定控件初始值 但是 < input type=“button” value=“立即购买”> 普通按钮 value 表示 button的名字 4.单行文本框默认值是type=“text” 密码框< input type...
Angularjs input file 上传文件
xiaoguangtouqiang的博客
06-26 5150
Angularjs 通过http post的方式来提交上传的图片，并实时预览图片上传结果
2016年11月30日 angularJS input=file 绑定change事件
JAVA的博客
11-30 7428
angularJS 之前都没有听说过,刚来第一天领导让我自己在网上学习. 第二天开始帮忙做一点东西.遇到的 第一个问题:angularJS 如何绑定file表单的change 上传图片,我不会用angularjs,于是使用了原始的ajax上传,想绑定change事件,就直接上传.发现ng-change时间对于type="file"的input标签不起作用,后来使用脚本绑定,但是如果一开始ng
angularjs上传 和 <input type="file">与ng-model 的玩法
Michael_Lbs的博客
06-01 4955
转自: 出处 (上传) 转自: 出处 (input 和 ng-model如何联系)
AngularJS用原生的fileinput上传图片
TomKKlalala的博客
11-30 2787
问题描述：在Angular环境中，使用这个控件进行上传文件，不通过表单提交的方法，而且需要将得到的图片进行裁剪 解决方法：      先通过                angualr.element(document.querySelector('#fileUpload)).on('change',fileHandler); 为input空间注册一个绑定的监控事
angular input file 上传文件
weixin_34384915的博客
05-05 485
<body > <div ng-controller="fileCtrl"> <form ng-submit="submit(obj)"> <input type="file" ng-file-model="obj.testFile" /> <input type="submit" value="submit" /&g...
vue中使用input[type="file"]实现文件上传功能
10-18
在Vue中实现文件上传功能，可以借助HTML的`input`元素中的`type="file"`属性，该属性允许用户通过界面选择文件。通过结合Vue的响应式数据绑定和事件处理机制，可以简化文件上传的实现过程。 首先，我们需要在Vue...
读取input:file的路径并显示本地图片的方法
09-05
在网页开发中，`<input type="file">` 是一个常见的文件上传控件，它允许用户选择本地的文件，如图片。然而，由于安全原因，现代浏览器并不直接提供所选文件的完整路径，而是返回一个相对安全的文件名或者一个沙箱内...
angularJs 取<input type='file'>中文件名 (ng-model获取不了)
づ開始懂了的博客
12-17 1万+
用AngularJS写文件上传时遇到了个问题，就是文件类型判断，一般上传文件类型判断都是在前端完成，如果提交给后台发请求判断处理，这无疑会增加服务器端压力。 AngularJS还有点不同的是，这里用的都是双向绑定，但是双向绑定时参数传过去是undefined或者为空。 {{feupload}} 上传 ... js代码 ... $sc
Angular2里获取（input file）上传文件的内容的方法
01-19
最近在用Angular2，需要有一个上传文件的功能，但是又不想用库，所以直接用原生的input file 标签。 <input type=file id=newUpload > 然后想获取上传的内容，于是先想了个愚蠢的方法，先通过id获取到这个input标签，然后再获取其中上传的内容 const uploadsFile = document.getElementById(name).files[0]; 结果就报错了。然后看提示说HTMLElement没有files方法。于是在es6里找了下有files属性的类型，是HTMLInputElement类型。于是就强制它转换成这个类型。
input type=“file” 获取文件名、文件类型、文件大小
PanDa____的博客
07-05 6366
input type=“file”获取文件名、文件大小、文件类型 将文件大小 改成KB 、MB 、 G 、 T 格式
angularJs 监听 input type=file onchange 事件
u013185395的博客
01-16 3523
angularJs 监听 input type=file  onchange 事件 onchange="angular.element(this).scope().vm.chenckFile();"
使用fileinput与angularjs上传文件
sinat_肖旭东的博客
06-13 1318
目录目录 文件准备 form表单的代码 angular的代码 服务器端代码 angular自启动函数写法文件准备首先必要的是引入fileinput的相关js和cs文件<link type="text/css" rel="stylesheet" href="css/fileinput.css" /> <script src=" js/fileinput.js"></script> <script s
angularJs 取<input type='file'>中文件名
sinat_36944265的博客
12-07 4637
angularjs小白一枚，从头开始在做一个angularjs做前端框架，nodejs做后端环境的项目，开始各自不会。后来在一点一点的学，过程十分缓慢。最近在做上传图片的功能，但单纯的ng-model无法获取到上传的图片名，后来各自查资料，在一个外国大大的视频里找到了方法，可以实现多图片上传，具体原理还很模糊，先分享之后一点一点参透。 html文件 upload {{fi
angularJS中input标签的ng-change事件无效
热门推荐
公西雒的技术站
11-25 1万+
出现这个问题是因为input的type是file，这时如果用ng-change="()"是无效的。 解决方法：用onchange事件。 $scope.change= function () { }
angular文件上传php,Angular2里获取（input file）上传文件的内容的方法
weixin_33420201的博客
04-02 294
最近在用Angular2，需要有一个上传文件的功能，但是又不想用库，所以直接用原生的input file 标签。然后想获取上传的内容，于是先想了个愚蠢的方法，先通过id获取到这个input标签，然后再获取其中上传的内容const uploadsFile = document.getElementById(name).files[0];结果就报错了。然后看提示说HTMLElement没有files方...
angularJS 如何绑定file表单的change？
SakuraLLj的专栏
11-22 4413
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
input监听onchange触发angular事件（file选择、checkbox复选框勾选）
zhichaosong的博客
05-05 4072
1. checkbox 类型的 input 中本身有 onchange 事件，但是 onchange 事件里放 angular 的方法是不识别的，这就要用到一个方法：angular.element(this).scope()，这样就可以随时随地调起 angular 方法啦，就是这么酸爽！ 2. 示例代码也包含了 file 类型的 input 选中文件后响应事件
vue3导入文件，文件名添加到输入框中
最新发布
06-09
首先，你需要在Vue3组件中定义一个data属性来存储文件名，然后使用`<label>`标签来创建一个文件选择框，将其绑定到一个方法中，该方法将更新data属性的值。最后，你可以使用`v-model`将data属性的值绑定到`<input>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值