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 相关文章推荐
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 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 date函数参数详解
2006/11/27 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
Python多线程和队列操作实例
2015/06/21 Python
详解python的数字类型变量与其方法
2016/11/20 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
学校三八妇女节活动情况总结
2014/03/09 职场文书
普通党员对照检查材料
2014/08/28 职场文书
模范班主任事迹材料
2014/12/17 职场文书
环卫工人慰问信
2015/02/15 职场文书
欠条格式范本
2015/07/03 职场文书