Jquery UI에서 PlUpload 대화 상자에서 파일을 추가 할 수 없습니다.

Question

jQueryUI 모달 대화 상자에서 시작하는 PLUpload가 있습니다. 대화 상자에서 시작한 후 PlUpload의 드래그 앤 드롭은 여전히 ​​작동하지만 파일 브라우저를 클릭하여 시작하지는 않습니다.

아래의 코드를 참조하십시오. http://jsfiddle.net/QqPLV/1/

HTML :

<a href="#" id="add-file-link">Open Uploader As Dialog</a> 

<div id="AddFilePopup" title="Add A File"> 
    <div id="drop-target">After opening in a dialog clicking here does nothing, but drag and drop in Chrome still works...</div> 
    <div id="plupload-nohtml5">No runtime found, your browser doesn't support HTML5 drag &amp; drop upload.</div> 
    <div id="plupload-filelist"></div> 
</div> 

CSS :

#drop-target { 
     border: 3px dashed #CCC; 
     text-align: center; 
     color: #999; 
     font-size: 16px; 
     padding : 50px; 
     cursor: pointer; 
    } 
    #debug { 
     margin-top: 20px; 
    } 
    #plupload-debug { 
     border : 1px Solid #600; 
     padding : 5px; 
     margin : 5px; 
    } 

자바 스크립트 :

$(function() { 
    $('#add-file-link').click(function() { 
     $('#AddFilePopup').dialog({ 
      modal: true, 
      width: 600 
     }); 

     uploader.refresh(); //this fixes IE10 not being able to click to add files 
     return false; 
    }); 

    initPlUpload(); 
}); 


function initPlUpload() { 
    uploader = new plupload.Uploader({ 
     runtimes: 'html5', 
     drop_element: 'drop-target', 
     browse_button: 'drop-target', 
     max_file_size: '4mb', 
     upload: "upload.php" 
    }); 

    uploader.bind('Init', function (up, params) { 
     if (uploader.features.dragdrop) { 
      $('#plupload-nohtml5').hide(); 
     }; 
    }); 

    uploader.bind('FilesAdded', function (up, files) { 
     for (var i in files) { 
      $('#plupload-filelist').append('<div id="' + files[i].id + '">- ' + files[i].name + ' - ' + files[i].id + ' (' + plupload.formatSize(files[i].size) + ')</div>'); 
     } 
    }); 

    uploader.init(); 
    } 

내가 추가 한 JsFiddle 내 응용 프로그램이 사용하는 jQuery를 및 jQuery를 UI 버전을 포함 라인

uploader.refresh(); 

클릭 핸들러에 IE10이 고정되어 있지만 Chrome은 여전히 ​​협조를 거부합니다. 심지어 uploader.refresh() 입력; Chrome의 콘솔로 업 로더의 탐색 기능을 다시 사용할 수는 없습니다 ...

편집 : 문제를 재현 할 필요가 없으며 읽기가 더 어려워 진 일부 줄을 제거합니다.

Answer 1

나는 동일한 문제가 있으며 그에 대한 조정이 있습니다.

.plupload{ z-index : 99999; } 

또는 즉시 원하는 경우 ....

$("div.plupload").css({"z-index":99999}); 

이 해결됩니다 : 당신이 업로드 엔진으로 HTML5를 할 때 그래서 당신은 스타일을 추가 할 필요가 트릭을 해결하기 위해, 발생 너의 문제.

다른 것은 창을 만들기 전에 업 로더를 파괴하기 때문에 작동하지 않습니다. 대화 상자에 pluploader를 실행하려면 매개 변수 open을 사용하도록 조언합니다. 대화 상자가 초기화 될 때 pluploader에 대한 동작이 실행됩니다.