Angular2里获取(input file)上传文件的内容的方法


Posted in Javascript onSeptember 05, 2017

最近在用Angular2,需要有一个上传文件的功能,但是又不想用库,所以直接用原生的input file 标签。

<input type="file" id="newUpload" >

然后想获取上传的内容,于是先想了个愚蠢的方法,先通过id获取到这个input标签,然后再获取其中上传的内容

const uploadsFile = document.getElementById(name).files[0];

结果就报错了。然后看提示说HTMLElement没有files方法。于是在es6里找了下有files属性的类型,是HTMLInputElement类型。于是就强制它转换成这个类型。

const uploadsFile=<HTMLInputElement>document.getElementById(name).files[0];

结果还是不行,最后改成了先转换类型再调用属性就可以了。

const uploadsFile = <HTMLInputElement>document.getElementById(name);
  const file = uploadsFile.files[0];

后面发现这种方式好像有点愚蠢,于是换了一个方法,用angular2里的$event来获取输入内容,里面也包括选择上传的文件。

<input type="file" id="newUpload" (change)="getUpload(newUpload, $event)" >

选择的文件在event.target.files里

private getUpload(obj, e) {
  if (e.target.files[0]) {
   const file = e.target.files[0];
   obj.file = file;
  }
 }

接着就可以把它放到formdata里了

const formData = new FormData();
  formData.append('file', this.upload.file);

最后清空选择上传的内容可以用

let upload = <HTMLInputElement>document.querySelector(selectorName);
  upload.value = null;

不知道有没有更好的方法,欢迎讨论和指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript常用脚本汇总(一)
Mar 04 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
浅谈angular4生命周期钩子
Sep 05 #Javascript
webpack踩坑之路图片的路径与打包
Sep 05 #Javascript
js实现鼠标跟随运动效果
Aug 02 #Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 #Javascript
javascript观察者模式实现自动刷新效果
Sep 05 #Javascript
js使用generator函数同步执行ajax任务
Sep 05 #Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 #Javascript
You might like
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
php文件缓存类汇总
2014/11/21 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
php数据访问之查询关键字
2016/05/09 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
js转义字符介绍
2013/11/05 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
入党自我评价范文
2014/02/02 职场文书
效能监察建议书
2014/05/19 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
工作失职检讨书
2015/01/26 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python