Plupload загружает только каждый второй файл

Question

Я работаю над плагином галереи изображений для Wordpress, и я пытаюсь включить перетаскивание & Снимите для Plupload.

Я не уверен, что не так, но мой файл upload.php вызывается только тогда, когда я бросаю второй файл, вводя область удаления, а затем upload.php вызывается дважды.

У кого-нибудь еще испытал это? Любая помощь приветствуется.

Update

---

Я понял, почему 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 здесь, после загрузки отображается изображение , Я переименовал некоторые из разделов, чтобы гарантировать, что дефисные имена не будут способствовать этой проблеме.

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

Вам не следует пытаться перерабатывать ваш загрузчик для новой загрузки, пока он все еще загружает некоторые файлы. Я предполагаю, что вам следует создать экземпляр нового компонента uploaders «по требованию» и запустить его. Как показано ниже коснуться (обновленная JS и HTML-разметка в PHP)

Извините за ошибки синтаксиса, не мог проверить это прямо сейчас ... Надеется, что это поможет

// 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>