web-dev-qa-db-ja.com

ファイルのアップロード：完了した割合の進行状況バー

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 によって処理されます。

「完了したパーセンテージ」の進行状況バーを作成して、ファイルのアップロード時に表示するにはどうすればよいですか？

javascriptphpjquerywordpressbuddypress
13
henrywright

私はBuddyPressに詳しくありませんが、すべてのアップロードハンドラー（androbinで概説されているHTML5 XHRを含む）には、バインドできるファイル進行フックポイントがあります。

私は ploadify 、 ploadifive および 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の 'progress'イベントにバインドするだけなので、これらのプロパティはすべて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 + "%");
}
12
Stumblor

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"そしてそれはエラーを警告した。

7
androbin

クライアント側のことを心配する前に、実際にこれを実現できるようにするためのサーバー側の要件を知っておく必要があると思います。

PHPの場合、session.upload_progressを有効にする必要があります wp_handle_upload（） 関数が別の何かを使用しない限り、ここでは推測しているだけですが、通常のPHPセッションのものを使用する可能性がありますしたがって、有効にする必要があります。

与えられたリンクのコメントを見ると、多くのユーザーは、進行状況がPHPなどの特定の環境では機能しないと言っています。これは、共有ホスティング環境で得られるほとんどの時間。

ここで多くの人がXHRアップローダーを使用するように指示していますが、問題は、カスタムのupload.phpスクリプトまたはそのようなデータを送信するためのサンプルを提供していることですが、wordpressあなたが制御しないプラグイン（ちょっと）

したがって、wp_handle_upload（）が実際にAJAX=のように機能しないことを考えると、ファイルアップロードフォームの送信ボタンがクリックされたときにイベントをフックし、いくつかを呼び出すJSにタイマーを設定する必要があります。 IDのようなフォームデータを渡し、そのIDでセッションをクエリしてファイルの進行状況を確認するURL：

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

そのデータを使用して、転送された量を計算できます。 JSタイマーを毎秒のように呼び出すように設定することもできますが、アップロードするファイルがそれほど大きくなく（たとえば、1MBを超える）、接続が良好である場合、通知される進行状況はあまりありません。

このセッションのアップロードデータを使用する方法のステップバイステップの例については、 このリンク を確認してください。

2
Gustavo Rubio

プログレスバーを挿入する必要があります。

フィルターフックapply_filters（ 'bp_core_pre_avatar_handle_upload'など）を使用して関数bp_core_avatar_handle_uploadをオーバーライドするのが唯一の方法だと思います

関数のほとんどを複製することになりますが、進行状況バーコードを追加できるはずです。

これが機能するようになったら、拡張チケットとして送信する必要があります。いい考えだね。

0
shanebp