Question

我正在为Wordpress开发一个图片库插件，我正在尝试启用拖放功能。删除Plupload。

我不确定是什么问题，但只有当我将第二个文件放在下拉区域中，然后调用upload.php两次时才会调用upload.php文件。

还有其他人经历过这个吗？非常感谢任何帮助。

更新

我发现为什么在添加第二个文件之前不会触发upload.php。

如果我删除up.start();中的uploader.bind('FilesAdded'...并将其置于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>

Answer 1

我尝试了您的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>

删除单个文件，然后等待您希望上传的时间。不要删除另一个认为它不起作用的文件，删除的所有文件都将出现在上传的列表中。

Answer 2

在上传某些文件时，您不应该尝试回收上传器以进行新上传。我想你应该做的是“按需”实例化新的上传者组件并启动它们。如下所示（在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>

Plupload仅在每个第二个文件上传

2 个答案: