Настройка загрузки файла ng2 - PullRequest
Новая
       16

Настройка загрузки файла ng2

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

Я пытаюсь настроить загрузку ng2-файла по умолчанию, но это не так хорошо, как требуется.Может ли кто-нибудь помочь мне.

Требование Requirement

HTML 

<input type="file" name="photo" ng2FileSelect [uploader]="uploader" />

1 Ответ

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

Вы можете добавить скрытый ввод файла и запустить его с помощью кнопки (или любого элемента HTML с активируемым кликом), например: 

<input type="file" ng2FileSelect [uploader]="uploader" style="display: none"  #fileUploader>

<button (click)="fileUploader.click()">
    Select File
</button>

Для загрузки файла с одиночным выбором вы можете показать выбранное имя файла следующим образом:

<div>
  {{uploader.queue[0].file?.name}}
</div>

Для загрузки файла с несколькими вариантами выбора вы можете отображать выбранные имена файлов, как это, но не забудьте добавить атрибут multiple к вашему вводу: 

<div *ngFor="let item of uploader.queue">
  {{item.file?.name}}
</div>

И изКонечно, вы должны определить классы CSS в соответствии с вашими потребностями.

Надеюсь, это поможет.

ОБНОВЛЕНИЕ 

.file-input {
  border-radius: 5px;
  border: 1px solid #eaeaea;
  overflow: hidden;
}

.file-name{
  padding: 10px 5px;
}

.select-button{
   padding: 10px 5px;
   background: #fafafa;
   text-align: center;
   color: #999999;
   cursor: pointer;
}

.select-button:hover{
   background: #cccccc;
   color: #fafafa;
}


.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-h-50-pct{
  -webkit-flex: 0 0 50% !important; /* Safari 6.1+ */
  -ms-flex: 0 0 50%  !important; /* IE 10 */
  flex: 0 0 50% !important;
  max-width: 50%  !important;
  min-width: 0;
  min-height: 0;
}

.flex-h-10{
  -webkit-flex: 0 0 10px !important; /* Safari 6.1+ */
  -ms-flex: 0 0 10px !important; /* IE 10 */
  flex: 0 0 10px !important;
  max-width: 10px;
  width: 10px;
  min-width: 0;
  min-height: 0;
}

.flex-h-fill-remaining{
  flex: 1 1 auto;
  min-width: 0;
}


.truncate {
  min-width: 0;
  position: relative;
  max-width: 100%;

  & * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

}
<div style="width: 350px"> <!-- The size is fluid -->
<div class="flex-row file-input">
    <div class="flex-h-50-pct flex-row file-name">
       <div class="flex-h-fill-remaining">
         <div class="truncate">
           {{item.file?.name}}
           </div>
       </div>
       <div class="flex-h-10" (click)="item.remove()">
          x
       </div>
    </div>
    <div class="flex-h-50-pct select-button" (click)="fileUploader.click()">
       Choose From Device
    </div>
</div>
</div>

Вам необходимо настроить атрибуты и значения CSS, но основа может быть такой.

...