Bootstrap で WebUploader を使用する手順の詳細な説明

今回はBootstrapでWebUploaderを使用する手順を詳しく説明します。BootstrapでWebUploaderを使用する際の注意点は何ですか?実際の事例を見てみましょう。

私の卒業制作では、Bootstrap のぼかしボックスに WebUploader のアップロード ボタンを表示する必要があります。その効果は次のとおりです。 Bootstrap を直接使用する アップロード コンポーネントがぼかしボックスに挿入されます:

ただし、実際の効果は、ぼかしボックスが表示されるとアップロード ボタンをクリックできないことです。

しかし、コンソールでエラーがあるかどうかを確認するために F12 を押した後、WebUploader は実際にファイル選択ボックスをポップアップ表示でき、他の機能は正常でした。

データを確認したところ、バグの原因は[ファイルを選択]ボタンの長さと幅が両方とも0であり、WebページにF12の機能があるため再レンダリングする必要があることがわかりました。 Web ページをレンダリングする場合、解決策は、Uploader を再レンダリングするかインスタンス化することです。再インスタンス化する必要があります: uploader.refresh()

最初のアイデアは、ぼかしボックス イベント

では、ポップアップぼかしボックスをクリックすると uploader.refresh() が実行されますが、修正後のその他のバグ。

最後の解決策は、ブラー ボックスによってトリガーされるイベントをリッスンしてから、コンポーネントを更新することです:

$('#updateModal').on('shown.bs.modal',function() {//提示框显示时候触发
    uploader.refresh();   //刷新当前webUploder
 });

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、次の点に注意してください。その他の関連記事は PHP 中国語 Web サイトにあります。

推奨読書:

uploader.refresh()

第一想法就是就是给模糊框的按钮注册点击事件，点击弹出模糊框的时候进行uploader.refresh()Vue は Echarts コンポーネントの動的リフレッシュを実装します

ブートストラップで selectpicker を使用してドロップダウン ボックスを実装します

以上がBootstrap で WebUploader を使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。