我正在为Wordpress开发一个图像库插件，我正在尝试启用拖动&为Plupload降落。
我不确定出了什么问题，但只有当我将第二个文件放入放置区域，然后upload.php被调用两次时，我的upload.php文件才会被调用。
其他人经历过这种情况吗？非常感谢您的帮助。
更新
我发现了为什么upload.php在添加第二个文件之前不会被激发。
如果我在uploader.bind('FilesAdded'...中删除up.start();并将其放入Plupload初始化：
var uploader = new plupload.Uploader({
(...)
init : {
FilesAdded: function(up, files) {
up.start();
}
}
(...)
});
然而，这使我能够在添加文件之前执行drop_area_visual_feedback(up)函数。即使我把这个函数放在uploader.bind('Init'...中，up.start()也会被触发，从而触发upload.php。
关于如何解决这个问题，有什么建议吗？
这是我的测试代码：
// JS Code
var sim_gal_data = JSON.parse(JSON.stringify(sim_gal_data_arr));
var uploader = new plupload.Uploader({
runtimes : 'html5,silverlight,flash,browserplus,gears,html4',
drop_element : 'drag-drop-container',
browse_button : 'plupload-file-browser-button',
container : 'media-container',
max_file_size : sim_gal_data['max_file_size'],
url : sim_gal_data['upload_url'],
flash_swf_url : sim_gal_data['plupload_url']+'plupload.flash.swf',
silverlight_xap_url : sim_gal_data['plupload_url']+'plupload.silverlight.xap',
multi_selection : true
});
uploader.bind('FilesAdded', function(up, files) {
var debug = jQuery('#debug').html();
debug += up.files.length + ', ';
jQuery('#debug').html(debug);
up.refresh();
up.start();
});
uploader.init();
// PHP Code
$sim_gal_data_arr = Array(
'upload_url' => SIMPLE_GALLERY_PLUGIN_URL.'upload.php',
'plupload_url' => includes_url('js/plupload/'),
'max_file_size' => wp_max_upload_size() . 'b'
);
?>
<script type="text/javascript">
var sim_gal_data_arr = <?php echo json_encode($sim_gal_data_arr); ?>;
</script>
<?php
<div id="drag-drop-container">
<div class="inside-container">
<p class="drag-drop-info">Drop files here</p> <p>or</p>
<p><input type="button" disabled="disabled" class="button" value="Select Files" id="plupload-file-browser-button" /></p>
</div>
</div>
<p><label>Debug data:</label><div id="debug"></div></p>
<div id="media-container" class=""></div>
我试过你的HTML，但一直收到一个错误Uncaught TypeError: Cannot read property 'currentStyle' of null
我在这里使用HTML/JS，上传后会显示图像。我重命名了一些div，以确保连字符的名称不会造成问题。
JS:
<script type="text/javascript">
$(function() {
var sim_gal_data = JSON.parse(JSON.stringify(sim_gal_data_arr));
// this will be used for displaying uploaded images
var public_url = 'http://www.path.to/your/upload/url/';
var uploader = new plupload.Uploader({
runtimes : 'html5,silverlight,flash,browserplus,gears,html4',
drop_element : 'dropbox',
browse_button : 'pickfiles',
container : 'container',
max_file_size : sim_gal_data['max_file_size'],
url : sim_gal_data['upload_url'],
flash_swf_url : sim_gal_data['plupload_url']+'plupload.flash.swf',
silverlight_xap_url : sim_gal_data['plupload_url']+'plupload.silverlight.xap',
multi_selection : true
});
uploader.bind('FilesAdded', function(up, files) {
$.each(files, function(i, file) {
$('#debug').prepend('Uploading ' + file.name + ' (' + file.size + ' bytes)');
});
up.refresh();
up.start();
});
uploader.bind('FileUploaded', function(up, file, info) {
$('#uploaded').prepend('<p><a href="' + public_url + file.name + '" target="_blank"><img src="' + public_url + file.name + '" width="100"/></a></p>');
});
uploader.init();
});
</script>
HTML:
<div id="dropbox">
<div id="container">
<p class="drag-drop-info">Drop files here</p> <p>or</p>
<p><input type="button" disabled="disabled" class="button" value="Select Files" id="pickfiles" /></p>
</div>
</div>
<p><label>Debug data:</label><div id="debug"></div></p>
<div id="uploaded"></div>
删除一个文件，然后等待您期望的上传时间。不要以为另一个文件不起作用就删除它，所有删除的文件都会出现在上传的列表中。
当上传器仍在上传一些文件时，您不应该试图回收它进行新的上传。我想您应该做的是"按需"实例化新的上传器组件并启动它们。如下所示（更新了php中的js和html标记）
很抱歉出现任何语法错误，现在无法检查。。。希望这将有助于
// JS Code
var InitUploader = function(i){
var sim_gal_data = JSON.parse(JSON.stringify(sim_gal_data_arr));
// create DOM elements for uploader i
$('#uploaders-container').append($('<div id="drag-drop-container'+i+'">
<div class="inside-container">
<p class="drag-drop-info">Drop files here</p> <p>or</p>
<p><input type="button" disabled="disabled" class="button" value="Select Files" id="plupload-file-browser-button'+i+'" /></p>
</div>
</div>
<div id="media-container'+i+'" class=""></div>
'));
// create uploader i
var uploader = new plupload.Uploader({
runtimes : 'html5,silverlight,flash,browserplus,gears,html4',
drop_element : 'drag-drop-container'+i,
browse_button : 'plupload-file-browser-button'+i,
container : 'media-container'+i,
max_file_size : sim_gal_data['max_file_size'],
url : sim_gal_data['upload_url'],
flash_swf_url : sim_gal_data['plupload_url']+'plupload.flash.swf',
silverlight_xap_url : sim_gal_data['plupload_url']+'plupload.silverlight.xap',
multi_selection : true
});
uploader.bind('FilesAdded', (function(j){return function(up, files) {
up.start();
$('#drag-drop-container'+j).hide(); // only the new uploader drag-drop zone should be visible
InitUploader(j+1);
};})(i));
uploader.bind('FileUploaded',function(upl,file,response){
// do some response processing, at your will
});
uploader.bind('UploadComplete', function(upl, files){
// ... do some processing
upl.destroy(); // for example. Should destroy the corresponding DOM elements too (drag-drop-container+'i' and possibly 'media-container'+i)
});
uploader.init();
}
$(document).ready(function(){InitUploader(0);});
// PHP Code
$sim_gal_data_arr = Array(
'upload_url' => SIMPLE_GALLERY_PLUGIN_URL.'upload.php',
'plupload_url' => includes_url('js/plupload/'),
'max_file_size' => wp_max_upload_size() . 'b'
);
?>
<script type="text/javascript">
var sim_gal_data_arr = <?php echo json_encode($sim_gal_data_arr); ?>;
</script>
<?php
<div id="uploaders-container">
</div>
<p><label>Debug data:</label><div id="debug"></div></p>