我正在尝试自定义默认的ng2-file-upload,但是按照要求,效果并不理想。谁能帮帮我。
HTML
<input type="file" name="photo" ng2FileSelect [uploader]="uploader" />
答案 0 :(得分:0)
您可以添加隐藏文件输入,并通过按钮(或任何可单击的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属性和值,但基础可能是这样。