php - Plupload は 2 ファイルごとにのみアップロードします

Question

私はWordpressの画像ギャラリープラグインに取り組んでおり、Pluploadのドラッグアンドドロップを有効にしようとしています.

何が問題なのかわかりませんが、私のupload.phpファイルは、2 番目のファイルをドロップ領域にドロップしたときにのみ呼び出され、その後upload.php2 回呼び出されます。

他の誰かがこれを経験しましたか？どんな助けでも大歓迎です。

アップデート

---

upload.php2 番目のファイルが追加されるまで起動しない理由を発見しました。

削除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>

1 つのファイルをドロップし、アップロードが予想される時間まで待ちます。動作していないと考えて別のファイルをドロップしないでください。ドロップされたすべてのファイルがアップロードされたリストに表示されます。

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>