PlUpload在jQuery UI的對話框無法點擊添加文件

我有我的jQueryUI的模態對話框正在推出PLUpload。在對話框中啓動後，PlUpload的拖放仍然有效，但點擊啓動文件瀏覽器不會。PlUpload在jQuery UI的對話框無法點擊添加文件

JsFiddle下面的代碼。該的jsfiddle包括我的應用程序使用jQuery和jQuery UI的版本：我添加

$(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(); 
    }

： 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; 
    }

的Javascript該行

uploader.refresh();

到單擊處理程序，以及固定IE10，而Chrome仍然拒絕合作。即使輸入uploader.refresh（）;到Chrome的控制檯不會帶來上傳的瀏覽功能起死回生......

編輯：若要刪除不要求重現該問題，並使其難以閱讀一些行。

來源

2013-05-30 FirstDivision

你可能已經注意到了這一點：在設置對話框選項模態時，問題就會消失：假的問題可能是在對話框中處理其覆蓋的方式。對不起，我不能有更多的幫助 – jbl

不，我沒有注意到。彈出窗口肯定需要處於模態狀態，所以我認爲我沒有嘗試過它......但也許如果沒有人知道解決方案，我可以以非模態形式啓動，然後切換到模型（我有懷疑甚至可能）。我們拭目以待。感謝您的線索。必須與阻止點擊的模式覆蓋物有關嗎？ – FirstDivision

是的，我認爲疊加與plupload構建其佈局的方式相互作用，導致點擊受阻。 – jbl

我有同樣的問題，有一個調整。它發生時，你有HTML5的上傳引擎，所以要解決，你需要添加一個樣式的伎倆：

.plupload{ z-index : 99999; }

，或者如果你喜歡在飛行....

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

這應該可以解決你的問題。

另一件事是你創建的窗口前，你正在破壞上傳，所以它不會起作用。如果你想在對話框中執行pluploader，我建議你使用參數open，所以當對話框初始化時，它會爲pluploader運行它的行爲。

來源

2013-06-18 18:55:22 Erick

是的！這就是它。謝謝！這是一個帶解決方案的更新JSfiddle（請參閱CSS部分中的＃drop-target類）：http://jsfiddle.net/QqPLV/2/ – FirstDivision

PlUpload在jQuery UI的對話框無法點擊添加文件

回答

相關問題