Как сбросить выбранный файл с типом файла тега ввода в Angular 2?
Вот как выглядит мой тег ввода:
<input type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
<button>Reset</button>
Я хочу сбросить выбранный файл в Angular 2. Помощь будет принята с благодарностью. Дайте мне знать, если вам нужно больше деталей.
PS
Я мог бы получить информацию о файле от $event параметры и сохраните его в переменной машинописного текста, но эта переменная не привязана к входному тегу.
6 ответов
Ты можешь использовать ViewChild чтобы получить доступ к входу в вашем компоненте. Сначала нужно добавить #someValue на ваш вклад, чтобы вы могли прочитать его в компоненте:
<input #myInput type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
Тогда в ваш компонент нужно импортировать ViewChild от @angular/core:
import { ViewChild } from '@angular/core';
Тогда вы используете ViewChild чтобы получить доступ к входу из шаблона:
@ViewChild('myInput')
myInputVariable: ElementRef;
Теперь вы можете использовать myInputVariable сбросить выбранный файл, потому что это ссылка на вход с #myInputнапример, создать метод reset() это будет вызвано click событие вашей кнопки:
reset() {
console.log(this.myInputVariable.nativeElement.files);
this.myInputVariable.nativeElement.value = "";
console.log(this.myInputVariable.nativeElement.files);
}
Первый console.log распечатает выбранный вами файл, второй console.log напечатает пустой массив, потому что this.myInputVariable.nativeElement.value = ""; удаляет выбранные файлы из входных данных. Мы должны использовать this.myInputVariable.nativeElement.value = ""; сбросить значение входа, потому что вход FileList Атрибут доступен только для чтения, поэтому невозможно просто удалить элемент из массива. Вот работает Плункер.
Я обычно сбрасываю ввод файлов после захвата выбранных файлов. Не нужно нажимать кнопку, у вас есть все необходимое в $event объект, который вы передаете onChange:
onChange(event) {
// Get your files
const files: FileList = event.target.files;
// Clear the input
event.srcElement.value = null;
}
Другой рабочий процесс, но OP не упоминает, что нажатие кнопки является требованием...
Угловой 5
HTML
<input type="file" #inputFile>
<button (click)="reset()">Reset</button>
шаблон
@ViewChild('inputFile') myInputVariable: ElementRef;
reset() {
this.myInputVariable.nativeElement.value = '';
}
Кнопка не требуется. Вы можете сбросить его после изменения события, это только для демонстрации
Одним из способов достижения этого является завершение вашего ввода в <form> пометить и сбросить его.
Я не рассматриваю присоединение формы к NgForm или же FormControl или.
@Component({
selector: 'form-component',
template: `
<form #form>
<input type="file" placeholder="File Name" name="filename">
</form>
<button (click)="reset()">Reset</button>
`
})
class FormComponent {
@ViewChild('form') form;
reset() {
this.form.nativeElement.reset()
}
}
Короткая версия Plunker:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<input #myInput type="file" placeholder="File Name" name="filename">
<button (click)="myInput.value = ''">Reset</button>
`
})
export class AppComponent {
}
И я думаю, что более распространенным случаем является не использование кнопки, а автоматический сброс. Операторы Angular Template поддерживают цепочечные выражения, поэтому Plunker:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<input #myInput type="file" (change)="onChange(myInput.value, $event); myInput.value = ''" placeholder="File Name" name="filename">
`
})
export class AppComponent {
onChange(files, event) {
alert( files );
alert( event.target.files[0].name );
}
}
И интересная ссылка о том, почему нет рекурсии по изменению стоимости.
Вы можете использовать ссылочную переменную шаблона и отправить ее методу
html
<input #variable type="file" placeholder="File Name" name="filename" (change)="onChange($event, variable);">
составная часть
onChange(event: any, element): void {
// codes
element.value = '';
}
Я думаю, что это просто, используйте #variable
<input #variable type="file" placeholder="File Name" name="filename" (change)="onChange($event); variable.value='' ">
<button>Reset</button>
Опция "variable.value = null" также доступна
В моем случае я сделал это, как показано ниже:
<input #fileInput hidden (change)="uploadFile($event.target.files)" type="file" />
<button mat-button color="warn" (click)="fileInput.value=''; fileInput.click()"> Upload File</button>
Я сбрасываю его с помощью #fileInput в HTML, а не создаю ViewChild в component.ts . При каждом нажатии кнопки "Загрузить файл" сначала сбрасывается #fileInput, а затем срабатывает#fileInput.click()функция. Если для сброса требуется какая-либо отдельная кнопка, нажмите#fileInput.value='' может быть выполнен.
Я использую очень простой подход. После загрузки файла я вскоре удаляю элемент управления вводом, используя *ngIf. Это приведет к тому, что поле ввода будет удалено из dom и добавлено повторно, следовательно, это новый элемент управления, и поэтому он пуст:
showUploader: boolean = true;
async upload($event) {
await dosomethingwiththefile();
this.showUploader = false;
setTimeout(() =>{ this.showUploader = true }, 100);
}<input type="file" (change)="upload($event)" *ngIf="showUploader">Я добавил этот тег ввода в тег формы..
<form id="form_data">
<input type="file" id="file_data" name="browse"
(change)="handleFileInput($event, dataFile, f)" />
</form>
Я угловой машинописный текст, я добавил строки ниже, получил идентификатор вашей формы в формах документа и сделал это значение нулевым.
for(let i=0; i<document.forms.length;i++){
if(document.forms[i].length > 0){
if(document.forms[i][0]['value']){ //document.forms[i][0] = "file_data"
document.forms[i][0]['value'] = "";
}
}
}
Распечатайте document.forms в консоли, и вы сможете понять..
Шаблон :
<input [(ngModel)]="componentField" type="file" (change)="fileChange($event)" placeholder="Upload file">
составная часть:
fileChange(event) {
alert(this.torrentFileValue);
this.torrentFileValue = '';
}
}
Если у вас возникли проблемы с загрузкой ng2-файла,
HTML:
<input type="file" name="myfile" #activeFrameinputFile ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />
составная часть
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
@ViewChild('activeFrameinputFile')InputFrameVariable: ElementRef;
this.frameUploader.onSuccessItem = (item, response, status, headers) => {this.InputFrameVariable.nativeElement.value = '';};
<input type="file" id="image_control" (change)="validateFile($event)" accept="image/gif, image/jpeg, image/png" />
validateFile(event: any): void {
const self = this;
if (event.target.files.length === 1) {
event.srcElement.value = null;
}
}