自定义 ng2-file-upload

Question

我正在尝试自定义默认的 ng2-file-upload，但效果并不理想。谁能帮帮我。

要求

HTML

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

Answer 1

您可以添加隐藏文件输入并使用按钮（或任何可点击的 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 属性和值，但基础可能是这样的。

自定义 ng2-file-upload

Customizing ng2-file-upload

typescript

ng2-file-upload

angular