php - Plupload 仅上传每秒一次的文件

Question

我正在为 Wordpress 开发图片库插件，并且正在尝试为Plupload启用拖放。

我不确定出了什么问题，但是upload.php仅当我将第二个文件放入放置区域然后upload.php调用两次时才调用我的文件。

有没有其他人经历过这个？任何帮助是极大的赞赏。

更新

---

我发现为什么upload.php直到添加第二个文件才被解雇。

如果我删除并将其放入 Plupload 启动中up.start();：uploader.bind('FilesAdded'...

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

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