Выполняется после выбора файла - PullRequest
Новая
       14

Выполняется после выбора файла

0 голосов
/ 18 февраля 2019

У меня есть кнопка, при нажатии которой открывается окно выбора файла, как показано ниже: 

<button mat-raised-button (click)="inputFile.click()">Choose a file</button>
<input #inputFile type="file" [style.display]="'none'" (change)="onChange($event)">
<label>{{fileUpload.name}}</label>

Затем я устанавливаю файл в onChange (), чтобы выбранное имя файла отображалось в теге: 

this.fileUpload = event.target.files[0];

Однако, когда файл большой, кажется, ничего не происходит.Метка будет пустой, пока не появится имя файла.Есть ли способ поставить прогресс / спиннер во время ожидания установки файла?

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Посмотрите на этот пример 

function _(el) {
  return document.getElementById(el);
}

function uploadFile() {
  var file = _("file1").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "file_upload_parser.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
  //use file_upload_parser.php from above url
  ajax.send(formdata);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}

function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}
<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1" onchange="uploadFile()"><br>
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <h3 id="status"></h3>
  <p id="loaded_n_total"></p>
</form>
0 голосов
/ 22 февраля 2019

Извините, если бы мог, я бы опубликовал это как вопрос, но пока не могу, так что это ответ:

Я немного постарался.Если будет нормально отключить спиннер, как только пользователь нажмет кнопку, появится возможность начать загрузку по событию щелчка ввода и отменить загрузку в методе onChange.

Проблема со спиннером / загрузчиком заключается в том, что, насколько я понял, отмена диалога загрузки ничего не вызывает.Отсюда возникает вопрос, каково было бы правильное время для остановки таймера в этом случае?

Существует возможность зарегистрировать это для события размытия.Этот подход предполагает, однако, что пользователь щелкнет где-то на странице, как только он закроет диалог загрузки.Не слишком уверен, если это на самом деле вариант для вас.

component.ts 

fileUpload: any;
loading: boolean;

@ViewChild('inputFile') inputFile;
@ViewChild('buttonElem') buttonElem;

onChange(event: any) {
  this.loading = false;
  this.fileUpload = event.target.files[0];
}

onBlur() {
  if(this.loading && document.activeElement !== 
      this.buttonElem.nativeElement) {
    this.loading = false;
  }
}

openDialog() {
  this.inputFile.nativeElement.value = '';
  this.inputFile.nativeElement.click();
}

шаблон 

<div>
  <button #buttonElem mat-raised-button (blur)="onBlur()" 
     (click)="openDialog()">Choose a file</button>
  <input #inputFile type="file" [style.display]="'none'" (click)="loading = 
      true" (change)="onChange($event)">
  <label *ngIf="fileUpload">{{fileUpload.name}}</label>
</div>

<div>
  Loading: {{loading}}
</div>

Вот блик стека: стек блика

...