Angular2里获取(input file)上传文件的内容的方法
2017-09-05 16:44
866 查看
最近在用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;
不知道有没有更好的方法,欢迎讨论和指正。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- IE input file隐藏不能上传文件解决方法
- 上传文件input tyle="file"文件的浏览按钮和文本框用图片替换的方法1
- 在C#.net中做页面上传的程序。用Dhtml的控件:(创建文件上载控件,该控件带有一个文本框和一个浏览按钮。)和类HtmlInputFile的两种方法
- input file 样式以及获取选择文件方法集合
- IE input file隐藏不能上传文件解决方法
- IE input file隐藏不能上传文件解决方法(转载)
- 关于Html动态添加上传文件控件inputFile(附件)及清除已选择的文件的几个方法
- Android webview Input type=file 文件上传 解决方法
- 利用Hadoop的FileSystem create方法获取 FSDataOutputStream 实现文件的上传
- IE7,IE8,上传文件控件input file和asp.net FileUpload控件无法获取完整路径的解决办法
- asp.net mvc中读取input file上传的txt文件内容,但不需要把文件保存到服务器上
- IE input file隐藏不能上传文件解决方法
- php 应用 bootstrap-fileinput 上传文件 插件 操作的方法
- JQuery------获取<input type="file">中的文件内容
- file_get_contents是打工文件或URL获取内容的方法,比其稳定的还有curl_get_contents
- 关于input设置成file类型上传文件后台获取不到
- 获取上传文件的路径input file
- adf中用inputFile上传文件到weblogic 方法1
- ASP.NET同时上传多个文件,和不使用HTMLFileInput上传的方法(resource about file upload)
- <input type="file">定义样式并获取上传文件路径及指定文件类型