文件上傳：已完成百分比進度條

我正在嘗試在BuddyPress上添加一個'到目前爲止完成的百分比'進度條到頭像上傳。目的是在上傳完成之前阻止用戶離開頁面。文件上傳：已完成百分比進度條

上傳過程在BuddyPress中由文件bp-core/bp-core-avatars.php中的bp_core_avatar_handle_upload()處理。該功能首先檢查文件是否已使用bp_core_check_avatar_upload()正確上傳。然後它檢查文件大小是否在限制範圍內，並且它具有可接受的文件擴展名（jpg，gif，png）。如果一切都檢出，用戶可以裁剪圖像（使用Jcrop），然後圖像移動到其真實位置。

實際上傳由WordPress功能wp_handle_upload處理。

如何創建「完成百分比」進度條並在文件上傳時顯示它？

來源

2014-02-08 henrywright

我對BuddyPress並不熟悉，但是所有上傳處理程序（包括androbin概述的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 + "%"); 
}

來源

2014-02-17 17:08:57 Stumblor

您需要注入進度條。

我認爲唯一的辦法就是使用篩選器掛鉤apply_filters（「bp_core_pre_avatar_handle_upload」等）

最終你會重複大部分功能，但你應該能夠添加爲忽略功能bp_core_avatar_handle_upload你的進度條碼。

如果你得到這個工作，你應該提交它作爲增強票;是個好主意。

來源

2014-02-09 21:46:45 shanebp

嗨shanebp - 我正在考慮沿着這些路線做點什麼。但是，這是代碼生成我正在努力的進度條。我編輯了我的問題。任何想法如何做到？我正在努力：（ – henrywright

沒有冒犯，但你有沒有谷歌的'上傳進度欄'？ – shanebp

hehe沒有被採取！我其實並沒有 - 試圖自己做 - 但現在看到有腳本可用！任何推薦？http://www.johnboy.com/php-upload-progress-bar/看起來很簡單 – henrywright

您應該使用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」，那麼它提醒該錯誤。

來源

2014-02-15 21:17:30 androbin

我認爲，你擔心的事情客戶端之前，你應該知道的服務器端的要求，居然能做到這一點。

對於PHP，你需要啓用了session.upload_progress除非wp_handle_upload()函數使用不同的東西，所以我在這裏只是猜測，但機會是他們使用常規的PHP會話的東西因此，它需要啓用。

如果您查看給定鏈接的註釋，許多用戶都說在某些環境下進程狀態無法正常工作，例如FastCGI上的PHP，這是您在大多數情況下會在共享主機環境中獲得的。

現在很多人都在告訴你使用XHR上傳器，但問題是他們給你一個自定義upload.php腳本或類似的東西來發送數據的例子，但你使用的是wordpress插件你不控制（有點）

所以考慮到wp_handle_upload（）實際上並不是以AJAX的方式工作，那麼你必須鉤上一個事件，當文件上傳表單提交按鈕被點擊並設置一個定時器JS調用某個URL，在其中傳遞表單數據（如ID），然後使用該ID查詢會話以檢查文件的進度：

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

有了這些數據，你就可以計算出已經轉移了多少。您可以將JS定時器設置爲每秒調用一次，但是如果它們上傳的文件不是很大（比如大於1mb），並且它們具有良好的連接，那麼就不會有太多進展需要通知。

查詢this link瞭解如何使用此會話上傳數據的分步示例。

來源

2014-02-17 22:43:40

文件上傳：已完成百分比進度條

回答

相關問題