php - Plupload 每隔一个文件上传一次

Question

我正在为 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>

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>

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