PlUpload在Jquery UI对话框中不能点击添加文件
PlUpload in Jquery UI Dialog Can't Click To Add Files
我有一个PLUpload,我在一个jQueryUI模态对话框中启动。在对话框中启动后,PlUpload的拖放仍然可以工作,但是单击以启动文件浏览器则不行。
JsFiddle下面的代码。JsFiddle包括jQuery和jQuery UI版本,我的应用程序正在使用: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 & 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: $(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();
}
我添加了
一行uploader.refresh();
的点击处理程序,这修复了IE10,但Chrome仍然拒绝合作。即使输入uploader.refresh();并不能使上传者的浏览功能恢复正常…
编辑:删除一些不需要重现问题的行,使其更难阅读。
我有同样的问题,有一个调整。当你使用HTML5作为上传引擎时就会出现这种情况,所以你需要添加一个样式:
.plupload{ z-index : 99999; }
或者如果你喜欢在飞行中....
$("div.plupload").css({"z-index":99999});
这应该能解决你的问题。
另一件事是你在创建窗口之前破坏了上传器,所以它不会工作。如果你想在对话框中执行pluploader,我建议你使用open参数,这样当对话框初始化时,它就会运行pluploader的行为。
相关文章:
- 日食添加文件而不将其复制到工作区中
- 在使用Dropzone.js添加文件之前,是否可以有弹出选项
- plupload添加文件功能
- 如何在python中的硒中添加文件属性到webelement
- 如何在通过 JavaScript 以编程方式添加文件后更新多个输入的文件长度
- 为 v3.4.0 添加文件和文件传输科尔多瓦插件
- Javascript添加文件输入框按钮麻烦
- 拖放区.js删除在页面加载时创建的模拟文件时,会显示默认的添加文件消息
- 使用jQuery向表单添加文件输入
- PlUpload在Jquery UI对话框中不能点击添加文件
- 在JS中添加文件下载时的暂停
- Google Apps Script为用户添加文件夹
- 如何在ajax调用中添加文件数据而不使用FormData
- 动态添加文件到Chrome扩展
- 是否有一种方法来添加文件到HTML5应用程序缓存使用javascript
- 添加文件按钮不工作,如果多于一个(jquery文件上传插件)
- 向当前表单字段添加文件选项
- 添加文件之前进行验证(自定义)
- 如何在动态添加文件输入框上使用Jquery插件上传多文件
- 如何在dat.gui中添加文件夹