ブートストラップ ブラー ボックスで WebUploader を使用する問題を修正

この記事では、Bootstrap ブラー ボックスで WebUploader を使用する際の問題点と解決策を主に紹介します。必要な友達は参考にしてください。私の卒業制作では、Bootstrap ブラー ボックスに WebUploader のアップロード ボタンを表示する必要があります。は次のとおりです:

Bootstrap のぼかしボックスにアップロード コンポーネントを直接挿入しました:

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

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

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

最初のアイデアは、ぼかしボックスのボタンのクリック イベントを登録し、uploader.refresh()を実行することです。ぼかしボックスが表示されるとき コード>; ただし、変更を加えた後は他にもバグがあるようです。 <code>uploader.refresh()

第一想法就是就是给模糊框的按钮注册点击事件，点击弹出模糊框的时候进行uploader.refresh()

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

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

上記は私がまとめたものであり、将来的には誰にとっても役立つことを願っています。

関連記事:

注文番号が存在するかどうかを同期的に検証するAjaxメソッド

Javaバックグラウンドから返されたjsonオブジェクトを処理し、ループしてテーブルを作成するjs+ajaxメソッド

Ajaxデータを取得してページに表示する実装方法

以上がブートストラップ ブラー ボックスで WebUploader を使用する問題を修正の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。