Angular2里獲?。╥nput file）上傳文件的內(nèi)容的方法
最近在用Angular2，需要有一個(gè)上傳文件的功能，但是又不想用庫(kù)，所以直接用原生的input file 標(biāo)簽。
<input type="file" id="newUpload" >
然后想獲取上傳的內(nèi)容，于是先想了個(gè)愚蠢的方法，先通過(guò)id獲取到這個(gè)input標(biāo)簽，然后再獲取其中上傳的內(nèi)容
const uploadsFile = document.getElementById(name).files[0];
結(jié)果就報(bào)錯(cuò)了。然后看提示說(shuō)HTMLElement沒(méi)有files方法。于是在es6里找了下有files屬性的類(lèi)型，是HTMLInputElement類(lèi)型。于是就強(qiáng)制它轉(zhuǎn)換成這個(gè)類(lèi)型。
const uploadsFile=<HTMLInputElement>document.getElementById(name).files[0];
結(jié)果還是不行，最后改成了先轉(zhuǎn)換類(lèi)型再調(diào)用屬性就可以了。
const uploadsFile = <HTMLInputElement>document.getElementById(name); const file = uploadsFile.files[0];
后面發(fā)現(xiàn)這種方式好像有點(diǎn)愚蠢，于是換了一個(gè)方法，用angular2里的$event來(lái)獲取輸入內(nèi)容，里面也包括選擇上傳的文件。
<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);
最后清空選擇上傳的內(nèi)容可以用
let upload = <HTMLInputElement>document.querySelector(selectorName); upload.value = null;
不知道有沒(méi)有更好的方法，歡迎討論和指正。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Angularjs上傳文件組件flowjs功能
- 基于AngularJS的拖拽文件上傳的實(shí)例代碼
- SpringMvc+Angularjs 實(shí)現(xiàn)多文件批量上傳
- Angular2-primeNG文件上傳模塊FileUpload使用詳解
- AngularJS 文件上傳控件 ng-file-upload詳解
- AngularJS+Bootstrap實(shí)現(xiàn)多文件上傳與管理
- 學(xué)習(xí)使用AngularJS文件上傳控件
- AngularJS向后端ASP.NET API控制器上傳文件
- Angular Js文件上傳之form-data
- angularjs客戶(hù)端實(shí)現(xiàn)壓縮圖片文件并上傳實(shí)例
相關(guān)文章
Angular 根據(jù) service 的狀態(tài)更新 directive
Angular JS (Angular.JS) 是一組用來(lái)開(kāi)發(fā)Web頁(yè)面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。本文給大家介紹Angular 根據(jù) service 的狀態(tài)更新 directive，需要的朋友一起學(xué)習(xí)吧2016-04-04
AngularJS 輸入驗(yàn)證詳解及實(shí)例代碼
本文主要介紹AngularJS 輸入驗(yàn)證,這里對(duì)AngularJS 輸入驗(yàn)證的資料做了整理,并附簡(jiǎn)單實(shí)例代碼和效果圖,有需要的小伙伴參考下2016-07-07
Agularjs妙用雙向數(shù)據(jù)綁定實(shí)現(xiàn)手風(fēng)琴效果
最近在工作總遇到需要實(shí)現(xiàn)類(lèi)似手風(fēng)琴效果的需求,下面小編通過(guò)本文給大家分享angularjs巧用雙向數(shù)據(jù)綁定實(shí)現(xiàn)手風(fēng)琴效果,需要的朋友可以參考下2017-05-05
angular-ngSanitize模塊-$sanitize服務(wù)詳解
本篇文章主要介紹了angular-ngSanitize模塊-$sanitize服務(wù)詳解 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套
這篇文章主要介紹了詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
詳解angularjs的數(shù)組傳參方式的簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了angularjs的數(shù)組傳參方式的簡(jiǎn)單實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
本文主要介紹AngularJS ng-csp 指令,這里對(duì)ng-csp 的基礎(chǔ)資料的整理,并附代碼實(shí)例和實(shí)現(xiàn)效果圖,有需要的小伙伴參考下2016-08-08
angularjs 獲取默認(rèn)選中的單選按鈕的value方法
下面小編就為大家分享一篇angularjs 獲取默認(rèn)選中的單選按鈕的value方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Angular.js中用ng-repeat-start實(shí)現(xiàn)自定義顯示
大家都知道Angular.js可以用ng-repeat來(lái)顯示列表數(shù)據(jù)，可是如果想要自定義顯示數(shù)據(jù)列表的話ng-repeat就實(shí)現(xiàn)不了了，這個(gè)時(shí)候可以利用ng-repeat-start 和 ng-repeat-end來(lái)實(shí)現(xiàn)，下面通過(guò)本文來(lái)詳細(xì)看看實(shí)現(xiàn)的方法吧。2016-10-10![angular4自定義表單控件[(ngModel)]的實(shí)現(xiàn)](http://img.jbzj.com/images/xgimg/bcimg9.png)
angular4自定義表單控件[(ngModel)]的實(shí)現(xiàn)
這篇文章主要介紹了angular4自定義表單控件[(ngModel)]的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11