[英]using input type file with angular material 2
How can I use angular material 2 FAB buttons to open a browse input dialog? 如何使用角度材料2 FAB按钮打开浏览输入对话框? This can be done in HTML by this way.
这可以通过这种方式在HTML中完成。
<button type="button">
<label for="file-input">click</label>
</button>
<input type="file" id="file-input" style="display:none">
I tried following the same approach with material 2, but it doesn't work. 我尝试使用与材料2相同的方法,但它不起作用。
<button md-mini-fab type="button">
<label for="fileToUpload">
<md-icon>add</md-icon>
</label>
</button>
<input id="fileToUpload" type="file" style="display:none;">
Are there any other ways that will work? 还有其他方法可行吗? Thank you.
谢谢。
Here is a simple solution: 这是一个简单的解决方案:
<button (click)="fileInput.click()">
<md-icon>library_add</md-icon>
<span>Select</span>
<input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
</button>
You need to simply trigger the click
for your file input. 您只需触发文件输入的
click
即可。
<button md-mini-fab type="button" onclick="document.getElementById('fileToUpload').click()">
<label for="fileToUpload"><md-icon>add</md-icon></label>
</button>
<input id="fileToUpload" type="file" style="display:none;">
Try this: 尝试这个:
<input #file type="file" [hidden]="true" accept="image/*" (change)="upload(file.files)">
<button mat-button #upload (click)="file.click()">Upload file</button>
<mat-button>
is from https://material.angular.io <mat-button>
来自https://material.angular.io
We are hiding the basic input button and linking the material button to the file upload. 我们隐藏了基本输入按钮并将材质按钮链接到文件上传。
I'm not sure about your cases, but in my Angular5 application I used this HTML structure for uploading files on server: 我不确定您的情况,但在我的Angular5应用程序中,我使用此HTML结构在服务器上上传文件:
<label for="uploadPicture" class="upload-file">
<mat-icon>add_a_photo</mat-icon>
</label>
<input type="file"
id="uploadPicture"
class="hidden-input"
accept="image/jpeg, .jpeg, image/png, .png, image/pjpeg, .jpg"
(change)="selectFile($event.target.files[0])">
In my case this solution working great. 就我而言,这个解决方案运行良好。 No need to trigger
click
event, because when you click on <label>
that related to input
it's same as click
on input
. 无需触发
click
事件,因为当您单击与input
相关的<label>
,它与click
input
相同。
It can be a combination of md-button, md-dialog, and md-input. 它可以是md-button,md-dialog和md-input的组合。 The mini fab button must have a click event to trigger the md-dialog component.
mini fab按钮必须有一个click事件才能触发md-dialog组件。
<button md-mini-fab type="button" (click)="openDialog()">
<label for="fileToUpload">
<md-icon>add</md-icon>
</label>
</button>
Within the md-dialog component, the md-input field can be added. 在md-dialog组件中,可以添加md-input字段。
<h1 md-dialog-title>Dialog</h1>
<div md-dialog-actions>
<md-input-container>
<input mdInput id="fileToUpload" type="file">
</md-input-container>
<p>
<button md-button (click)="dialogRef.close('Option 1')">Option 1</button>
<button md-button (click)="dialogRef.close('Option 2')">Option 2</button>
</p>
</div>
Please see this Plunker example to get all/specific details. 请参阅此Plunker示例以获取所有/特定详细信息。
You can use a button and an input. 您可以使用按钮和输入。 Make sure that button doesn't enclose input .
确保该按钮不包含输入 。
<button (click)="fileInput.click()">Upload</button>
<input #fileInput type="file" (change)="onFileInput($event)" multiple style="display:none;" />
You can also use a label enclosing an input. 您还可以使用包含输入的标签。
<label>
<mat-icon>add</mat-icon>
<input type="file" (change)="onFileInput($event)" multiple />
</label>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.