it-swarm.com.de

Datei-Uploads: Prozentsatz der abgeschlossenen Statusanzeige

Ich versuche, den Fortschrittsbalken "Bis jetzt abgeschlossen" zu Avatar-Uploads in BuddyPress hinzuzufügen. Ziel ist es, die Benutzer daran zu hindern, sich von der Seite zu entfernen, bevor der Upload abgeschlossen ist.

Der Upload-Vorgang wird in BuddyPress von bp_core_avatar_handle_upload() in der Datei bp-core/bp-core-avatars.php durchgeführt. Die Funktion beginnt mit der Überprüfung, ob die Datei mit bp_core_check_avatar_upload() ordnungsgemäß hochgeladen wurde. Anschließend wird geprüft, ob die Dateigröße innerhalb der zulässigen Grenzen liegt und eine akzeptierte Dateierweiterung (jpg, gif, png) hat. Wenn alles ausgecheckt ist, kann der Benutzer das Bild zuschneiden (verwendet Jcrop ), und das Bild wird an seinen tatsächlichen Ort verschoben.

Der eigentliche Upload wird von der WordPress-Funktion wp_handle_upload übernommen.

Wie kann ich einen Fortschrittsbalken "Prozentsatz abgeschlossen" erstellen und ihn anzeigen, wenn die Datei hochgeladen wird?

12
henrywright

Ich bin nicht mit BuddyPress vertraut, aber alle Upload-Handler (einschließlich der von androbin beschriebenen HTML5-XHR-Version) verfügen über einen Dateifortop-Hook-Punkt, an den Sie binden können. 

Ich habe uploadify , uploadifive und swfupload verwendet, und sie können alle mit demselben Fortschrittsfunktionshandler interagieren, um das gleiche Fortschrittsbalkenergebnis zu erzielen.

// 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); });

Da Uploadifive ein HTML5-basierter Uploader ist, wird er einfach an das XHR-Ereignis 'progress' gebunden, sodass alle diese Eigenschaften für jeden HTML5-Uploader verfügbar sind. 

Wie für den aktuellen Status-Barcode ..

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 + "%");
}
11
Stumblor

Sie sollten ein XHR-Objekt verwenden. Ich weiß jetzt nicht, ob es Ihnen hilft, aber ich habe einen einfachen XHR-Uploader geschrieben.

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;
});

In diesem Fall habe ich die Datei mit uploadimage.php hochgeladen, und wenn sie gedruckt wurde: "ERROR_FILESIZE", wurde der Fehler gemeldet.

7
androbin

Ich denke, bevor Sie sich über die Client-Seite Gedanken machen, sollten Sie sich der serverseitigen Anforderungen bewusst sein, um dies tatsächlich tun zu können.

Für PHP muss session.upload_progress aktiviert sein, es sei denn, die Funktion wp_handle_upload () verwendet etwas anderes. Ich schätze hier nur, aber die Chancen stehen gut Sie verwenden die regulären PHP Sitzungssachen und müssen daher aktiviert werden.

Wenn Sie sich die Kommentare für den angegebenen Link ansehen, sagen viele Benutzer, dass der Fortschrittsstatus in bestimmten Umgebungen wie PHP unter FastCGI nicht funktioniert. Dies ist, was Sie meistens in Shared-Hosting-Umgebungen erhalten.

Nun sagen Ihnen viele Leute, Sie sollten den XHR-Uploader verwenden, aber das Problem ist, dass Sie ein Beispiel für ein benutzerdefiniertes upload.php-Skript oder ähnliches zum Senden der Daten angeben. Sie verwenden jedoch ein Wordpress-Plugin, das Sie nicht verwenden. t Kontrolle (irgendwie)

Wenn man bedenkt, dass wp_handle_upload () nicht wirklich auf eine AJAX Weise funktioniert, müsste ein Ereignis angehängt werden, wenn auf die Schaltfläche zum Hochladen des Datei-Formulars geklickt wird, und in JS ein Zeitgeber gesetzt werden, der eine URL anruft Übergeben Sie die Formulardaten wie eine ID und fragen Sie dann die Sitzung mit dieser ID ab, um den Fortschritt der Datei zu überprüfen:

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

Mit diesen Daten können Sie berechnen, wie viel übertragen wurde. Sie können den JS-Timer so einstellen, dass er wie jede Sekunde aufgerufen wird. Wenn die hochgeladenen Dateien jedoch nicht sehr groß sind (z. B. größer als 1 MB) und sie über eine gute Verbindung verfügen, werden keine großen Fortschritte bei der Benachrichtigung angezeigt.

Überprüfen Sie diesen Link für ein schrittweises Beispiel, wie Sie mit diesen Sitzungs-Upload-Daten arbeiten.

2
Gustavo Rubio

Sie müssen den Fortschrittsbalken injizieren. 

Ich denke, die einzige Möglichkeit besteht darin, die Funktion bp_core_avatar_handle_upload mit dem Filter-Hook apply_filters ('bp_core_pre_avatar_handle_upload' usw.) zu überschreiben. 

Die meisten Funktionen werden zwar dupliziert, der Fortschrittsbarcode kann jedoch hinzugefügt werden. 

Wenn dies funktioniert, sollten Sie es als Erweiterungsticket einreichen. Es ist eine gute Idee. 

0
shanebp