web-dev-qa-db-ja.com

ファイル入力の代わりにボタンでng2-file-uploadを使用できますか？

ng2-file-upload （シングルアップロードの例）を使用しており、使用したい：ng2FileSelectファイル入力の代わりにボタンまたはdivを使用します。これどうやってするの？

私はこれにこのようなことをしたい：

<button ng2FileSelect [uploader]="uploader">Choose file</button>

の代わりに：

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

ng2-file-upload を使用したクリーンな方法が存在しない場合、代替手段を知っていますか？

file-uploadangular
16
Leantraxxx

可能な解決策の1つは、Angular 2のテンプレート変数を活用し、テンプレート変数を入力要素に割り当てることです。完了したら、その入力で定義されたメソッドを別の要素から直接呼び出すことができます。ボタン。

私は自分のアプリケーションの1つで次のことを行いました。 IE11、Firefox、Chromeで動作します。

<button (click)="fileInput.click()" class="btn btn-default">Upload</button>
<span style="visibility: hidden; position: absolute; overflow: hidden; width: 0px; height:0px;border:none;margin:0; padding:0">
     <input type="file" #fileInput ng2FileSelect [uploader]="uploader" />
</span>

ご覧のとおり、ボタンは、独自のクリックイベント内で#fileInputのクリックイベントを呼び出しているだけです。

入力をspanで埋めてから、ボタンだけが見えるように、一連のスタイルを介してビューからスパンを非表示にしていることに注意してください。また、これらのスタイルを入力要素に直接適用すると、IE11で問題が発生するように思われることに注意してください。

25
RMD

ヨンはラップできますinput[file]要素をlabel要素で非表示にします。 この回答 および この例 を参照してください

コードは次のとおりです。

HTML：

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>

CSS：

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
7
Roman Kondakov

簡単な方法では、labelでできます。inputを非表示にするだけです。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<label class="btn custom-input-btn">
<input type="file" name="photo" style="display:none" accept="*" multiple>        
<i class="fa fa-cloud-upload"></i> Upload Files
</label>
1
Samurai