Bootstrap 흐림 상자에서 WebUploader를 사용하는 문제 해결

이 글은 주로 Bootstrap Blur Box에서 WebUploader를 사용할 때의 문제점과 해결 방법을 소개합니다. 필요한 친구들이 참고하면 됩니다.

제 졸업 프로젝트에서 Bootstrap Blur Box에 WebUploader의 업로드 버튼을 표시해야 하는 요구 사항이 있습니다.

Bootstrap의 블러 상자에 업로드 컴포넌트를 직접 삽입했습니다.

그러나 실제 효과는 블러 상자가 나타날 때 업로드 버튼을 클릭할 수 없다는 것입니다.

그런데 콘솔에 오류가 있는지 확인하기 위해 F12를 눌렀더니 WebUploader가 실제로 파일 선택 상자를 띄웠고 다른 기능은 정상이었습니다.

데이터를 검토한 결과 버그의 원인은 [파일 선택] 버튼의 길이와 너비가 모두 0이고 웹 페이지를 F12의 기능이 있어서 다시 렌더링해야 한다는 것을 발견했습니다. 웹 페이지를 렌더링하는 방법은 업로더를 다시 렌더링하거나 인스턴스화하는 것입니다. 다시 인스턴스화해야 합니다: uploader.refresh()uploader.refresh()

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

첫 번째 아이디어는 흐림 상자의 버튼에 대한 클릭 이벤트를 등록하고 uploader.refresh()를 수행하는 것입니다. 블러박스가 뜰 때.code>; 그런데 수정하고 나니 또 다른 버그가 있었던 것 같습니다.

최종 해결책은 블러 상자에 의해 트리거된 이벤트를 듣고 구성요소를 새로 고치는 것입니다.

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

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

주문 번호가 존재하는지 동기적으로 확인하는 Ajax 메소드

js+ajax 메소드는 Java 백그라운드에서 반환된 json 객체를 처리하고 테이블에 대한 루프에서 생성합니다

Ajax는 데이터를 가져와 페이지에 표시합니다. 구현 방법

🎜

위 내용은 Bootstrap 흐림 상자에서 WebUploader를 사용하는 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!