angular文件上传php,Angular2里获取（input file）上传文件的内容的方法

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

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

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

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

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

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

const uploadsFile = document.getElementById(name);

const file = uploadsFile.files[0];

后面发现这种方式好像有点愚蠢，于是换了一个方法，用angular2里的$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 = document.querySelector(selectorName);

upload.value = null;

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

angular文件上传php,Angular2里获取（input file）上传文件的内容的方法相关推荐

js获取input file框（文件上传框）内容，上传后台
直接复制,修改jquery为你的本地路径,本js可以把file选择的图片,转化为base64对象.无论是回显,还是转成图片,或者直接上传后台都是可以滴. <!DOCTYPE html> & ...
php获取input file路径,JavaScript_JS获取input file绝对路径的方法(推荐)，最近因需要上传文件到oracle blo - phpStudy...
JS获取input file绝对路径的方法(推荐) 最近因需要上传文件到oracle blob里, 在获取文件路径的遇到些问题,由于安全原因,新版的浏览器都不支持直接获取本地URL,在网上找了些方法, ...
Input file 上传文件
Input file 上传文件介绍 <input> type 类型为 file 的 input 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascr ...
ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
php 手机网站上传文件,HTML5的 input:file上传类型控制，html5手机上传图片调用API。...
调用摄像.视频调用语音调用相机调用相机图片或者相册一.input:file属性属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用 ...
实现php a标签文件,HTML_如何点击a标签实现弹出input file上传文件对话框，html 复制代码代码如下: SPAN - phpStudy...
如何点击a标签实现弹出input file上传文件对话框 html 复制代码代码如下: <div> <a href="###">添加图片a> < ...
vue中input获取文件路径_JS获取input file绝对路径的方法(推荐)
最近因需要上传文件到oracle blob里, 在获取文件路径的遇到些问题,由于安全原因,新版的浏览器都不支持直接获取本地URL,在网上找了些方法,如下: //FX获取文件路径方法 function ...
input:file上传类型控制简单介绍
<input type="file">可以上传文件,这个就不用多介绍了. 其实我们使用此控件可以进行上传文件格式的控制. 特别说明:在实际应用中,不但要在前端进行验证, ...
python计算多个模型在不同数据集上的预测概率、获取每个数据集上的最优模型、多个最优模型的ROC曲线进行对比分析
pytyon计算多个模型在不同数据集上的预测概率.获取每个数据集上的最佳模型.多个最优模型的ROC曲线进行对比分析目录

angular文件上传php,Angular2里获取（input file）上传文件的内容的方法

angular文件上传php,Angular2里获取（input file）上传文件的内容的方法相关推荐

最新文章

热门文章