Загрузок файла: Процент завершен индикатор выполнения

Question

Я пытаюсь добавить индикатор прогресса в процентах до тех пор, пока аватар не загрузится в BuddyPress. Цель состоит в том, чтобы запретить пользователям перемещаться от страницы до завершения загрузки.

Процесс загрузки обрабатывается в BuddyPress на bp_core_avatar_handle_upload() в файле bp-core/bp-core-avatars.php. Функция запускается, проверяя, что файл загружен правильно, используя bp_core_check_avatar_upload(). Затем он проверяет, что размер файла находится в пределах, и что он имеет принятое расширение файла (jpg, gif, png). Если все проверяется, пользователю разрешено обрезать изображение (использует Jcrop), а затем изображение перемещается в его реальное местоположение.

Фактическая загрузка осуществляется функцией WordPress wp_handle_upload.

Как создать контрольную панель «процент завершен» и отобразить ее при загрузке файла?

Answer 1

Я не знаком с BuddyPress, но все обработчики загрузки (включая HTML5 XHR, который обозначен андробином) будут иметь точку захвата прокрутки файла, к которой вы можете привязать.

Я использовал uploadify, uploadifive и swfupload, и все они могут взаимодействовать с тем же обработчиком функции прогресса в целях получения идеальной такой же результат прогресса бар.

// SWFUpload 
$elem.bind('uploadProgress', function(event, file, bytesLoaded) { fnProgress(file, bytesLoaded); }) 

// Uploadify 
$elem.uploadify({ onUploadProgress: function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { fnProgress(file, bytesUploaded); }); 

// Uploadfive 
$elem.uploadifive({ onProgress: function(file, e) { fn.onProgress(file, e.loaded); }); 

Uploadifive, будучи на основе HTML5 пользователя, просто связывается с XHR «прогресс» события, так что все эти свойства будут доступны для любого пользователя HTML5.

Что касается фактического штрихового кода ..

HTML:

<div class='progressWrapper' style='float: left; width: 100%'> 
    <div class='progress' style='float: left; width: 0%; color: red'></div> 
    <div class='progressText' style='float: left;></div> 
</div> 

JS:

var fnProgress = function(file, bytes) { 
    var percentage = (bytesLoaded/file.size) * 100; 

    // Update DOM 
    $('.progress').css({ 'width': percentage + '%' }); 
    $('.progressText').html(Math.round(percentage + "%"); 
} 

Answer 2

Вам необходимо ввести индикатор выполнения.

Я думаю, что единственный способ переусердствовать ездить функцию bp_core_avatar_handle_upload с помощью фильтра крючков apply_filters («bp_core_pre_avatar_handle_upload» и т.д.)

Вы в конечном итоге дублируя большую часть функции, но вы должны быть в состоянии добавить ваш код прогресса.

Если вы получаете эту работу, вы должны отправить ее в качестве дополнительного билета; это хорошая идея.

Answer 3

Вы должны использовать объект XHR. Я не сейчас, если это вам поможет, но у меня есть простой загрузчик XHR.

HTML:

<form id="uploader" enctype="multipart/form-data" action="uploadimage.php" method="post"> 
     <input type="file" id="file" name="file[]" multiple="multiple" accept="image/jpeg" /><br/> 
     <input type="submit" value="Upload" /> 
     <div class="list" style="background-color:#000;color:#FFF;padding:5px;display:none;border-radius:5px;"> 
     </div> 
    </form> 

JS:

$("#uploader").submit(function(){ 
    $('#uploader .list').fadeIn(100).css("width","0px"); 
    var data = new FormData(); 
    // if you want to append any other data: data.append("ID",""); 
    $.each($('#file')[0].files, function(i, file) { 
     data.append('file-'+i, file); 
    }); 
    $.ajax({ 
     url: 'uploadimage.php', 
     data: data, 
     cache: false, 
     contentType: false, 
     processData: false, 
     type: 'POST', 
     xhr: function() { // custom xhr 
      myXhr = $.ajaxSettings.xhr(); 
      if(myXhr.upload){ // check if upload property exists 
       myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload 
      } 
      return myXhr; 
     }, 
     success: function(data2){ 
      $('#uploader .list').css({ 
       "width":"200px", 
       "text-align":"center", 
       "margin":"10px 0 10px 0" 
      }).html("DONE!").delay(2000).fadeOut(500); 
      if (data2 == "ERROR_FILESIZE"){ 
       return alert("Choose another file"); 
      } 
          else{ /*change location*/ } 
     }); 
    return false; 
}); 

В этом случае я загрузил файл с uploadimage.php и если он напечатал: "ERROR_FILESIZE", то это извещение об ошибке.

Answer 4

Я думаю, что, прежде чем беспокоиться о клиентской стороне вещей, которые вы должны знать о требованиях на стороне сервера на самом деле быть в состоянии выполните это.

Для PHP вы должны иметь session.upload_progress включен, если функция wp_handle_upload() не использует что-то другое, поэтому я здесь только гадать, но скорее всего они используют регулярные PHP сеанса материал, следовательно, он должен быть включен.

Если вы посмотрите комментарии к данной ссылке, многие пользователи утверждают, что состояние прогресса не работает в определенных средах, таких как PHP на FastCGI, которые вы обычно посещаете в средах с общим хостингом.

Теперь многие люди говорят вам использовать загрузчик XHR, но проблема в том, что они дают вам пример пользовательского сценария upload.php или что-то в этом роде для отправки данных, но вы используете плагин wordpress который вы не контролируете (kinda)

Учитывая, что wp_handle_upload() на самом деле не работает по пути AJAX, вам нужно будет связать событие, когда нажата кнопка отправки формы файла, и установить таймер в JS, который вызывает некоторый URL-адрес, где вы передаете данные формы, такие как идентификатор, а затем запрашиваете сеанс с этим идентификатором, чтобы проверить ход файла:

$_SESSION["upload_id"]["content_length"] 
$_SESSION["upload_id"]["bytes_processed"] 

С помощью этих данных вы можете рассчитать, сколько было перенесено. Вы можете настроить таймер JS на вызов как каждую секунду, но если файлы, которые они загружают, не очень большие (скажем, больше 1 Мб), и у них есть хорошая связь, тогда не будет большого прогресса, чтобы быть уведомленным.

Отметьте this link для пошагового примера о том, как работать с этой загрузкой данных сеанса.