파일 업로드:완료된 진행률 표시줄

파일 업로드:완료된 진행률 표시줄

BuddyPress에서 아바타 업로드에 '지금까지 완료된 비율' 진행 표시줄을 추가하려고 합니다.목적은 업로드가 완료되기 전에 사용자가 페이지에서 벗어나는 것을 중지하는 것입니다.

업로드 프로세스는 BuddyPress에서 처리됩니다.bp_core_avatar_handle_upload()파일 bp-core/bp-core-avatars.filename 에 포함되어 있습니다.이 함수는 파일이 올바르게 업로드되었는지 확인하는 것으로 시작됩니다.bp_core_check_avatar_upload()그런 다음 파일 크기가 제한 범위 내에 있는지, 허용된 파일 확장자(jpg, gif, png)가 있는지 확인합니다.모든 것이 확인되면 사용자는 이미지를 잘라낼 수 있습니다(Jcrop 사용). 그런 다음 이미지를 실제 위치로 이동합니다.

실제 업로드 작업은 WordPress 함수 wp_handle_upload에 의해 처리됩니다.

파일을 업로드할 때 '완료 비율' 진행 표시줄을 만들고 이를 표시하려면 어떻게 해야 합니까?

저는 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 '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 + "%");
}

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」라고 인쇄되어 있는 경우는, 에러를 통지합니다.

클라이언트측을 걱정하기 전에 서버측 요건을 알고 있어야 실제로 이를 달성할 수 있다고 생각합니다.

PHP의 경우 wp_handle_upload() 함수가 다른 것을 사용하지 않는 한 session.upload_progress를 활성화해야 합니다.따라서 저는 추측합니다만, 일반 PHP 세션 정보를 사용하고 있을 가능성이 있기 때문에 활성화해야 합니다.

특정 링크의 코멘트를 보면 많은 사용자가 FastCGI 상의 PHP와 같은 특정 환경에서는 진행 상태가 작동하지 않는다고 합니다.이것은 공유 호스팅 환경에서 대부분의 경우 볼 수 있는 것입니다.

여기 있는 많은 사람들이 XHR 업로더를 사용하라고 하지만 문제는 커스텀 업로더의 예를 제시한다는 것입니다.데이터를 전송하기 위한 php 스크립트 또는 그와 같은 것을 사용하지만, 사용자가 제어할 수 없는 워드프레스 플러그인을 사용하고 있습니다(스위치).

따라서 wp_handle_upload()는 실제로 AJAX 방식으로 동작하지 않으므로 file upload form submit 버튼을 클릭했을 때 이벤트를 훅하고 JS에서 폼 데이터를 ID처럼 전달하는 URL을 호출하는 타이머를 설정한 후 해당 ID로 세션을 조회하여 파일의 진행 상황을 확인해야 합니다.

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

이 데이터를 사용하여 전송한 양을 계산할 수 있습니다.JS 타이머를 매초와 같이 호출하도록 설정할 수 있지만 업로드하는 파일이 매우 크지 않고(1MB보다 큰 경우) 연결 상태가 양호하면 알림이 크게 진행되지 않습니다.

이 세션 업로드 데이터 사용 방법에 대한 단계별 예는 이 링크를 참조하십시오.

진행 표시줄을 삽입해야 합니다.

필터 훅 apply_filters('bp_core_pre_avatar_handle_upload' 등)를 사용하여 함수 bp_core_avatar_handle_upload를 오버라이드하는 방법밖에 없다고 생각합니다.

대부분의 기능이 중복되지만 진행률 바코드를 추가할 수 있습니다.

이 작업을 수행할 경우 확장 티켓으로 제출해야 합니다. 좋은 아이디어입니다.

언급URL : https://stackoverflow.com/questions/21646626/file-uploads-percentage-completed-progress-bar