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