2016-09-19 7 views
0

画像ファイルをアップロードするためにカスタムファイルアップローダーを構築する必要がありますが、元のデザインの入力ファイルは使用しませんが、非表示にしてボタンを表示するだけです。VueJS:ボタンから入力ファイルをトリガーする

そして、私は、jQueryとAngularJSで別のボタンをクリックしたときに入力ファイルをトリガーする方法を知っていますが、VueJSで同じことをする方法が見つからないのですか?

大切にしてください!

+0

[Vue.jsを使用してボタンにファイルをバインドする]の可能な複製(http://stackoverflow.com/questions/37535657/bind-file-input-to-a-button-using-vue-js) – oliverpool

答えて

5

これはすばやくシンプルで汚れた解決策ですが、それは私の仕事です。通常のHTMLファイル入力を作成し、CSSで非表示にするか、VueJSで非表示にします。隠しファイル入力にv-on:changeイベントを追加します。

<input id="fileInput" type="file" style="display:none" v-on:change="yourVueMethod()"/> 

入力フィールドのクリックイベントをトリガーするボタンを作成します。

<button id="fileInputButton" onclick="document.getElementById('fileInput').click()">Open File</button> 

これで、いつものように、あなたの方法で何でもできます。最高の解決策ではないかもしれませんが、やりやすいです。

+1

このソリューションは、一部のブラウザではサポートされていない可能性があります。私たちはこれをやろうとしましたが、一部のブラウザではクリックに反応しませんでした。私が見た別の解決策は、あなたのボタン(好きなもの)を入れ、入力ファイルコントロールの上に置き、不透明度を0(CSS経由)に変更することです。それでもボタンはクリックに反応しますが、ユーザーには別のボタンをクリックしているようです。 –

+0

'$ event'を属性に追加して、ハンドラの引数としてイベントを取得したいかもしれません: ' v-on:change = "yourVueMethod($ event)' –

関連する問題