Fine-Uploader - wie in Kombination mit anderen Eingabefeldern zu verwenden?

Question

Ich möchte FineUploader innerhalb einer typischen Form verwenden:

<form enctype="multipart/form-data" method="post""> 
    <input name="fileupload" type="file" "> 
    <input type="text" name="title" size="45" maxlength="100"> 
    <textarea name="description" cols="40" rows="8"></textarea> 
    <input type="hidden" name="op" value="Add"> 
<input type="submit" value="Upload"> 

So würde Ich mag eigentlich in erster Linie die <input name="fileupload" type="file" "> Teil ersetzen.

Leider bin ich nicht sehr vertraut mit JavaScript und jQuery Jet und habe keine Ahnung, wie das geht. Ich konnte keinen exemplarischen Code finden, in dem FineUploader zusammen mit anderen zu sendenden Daten verwendet wird.

Ich würde jede Hilfe zu schätzen wissen!

Dank Kashuda

Answer 1

Während Fein Uploader erfordert keine jQuery (oder jede andere Bibliothek, was das betrifft) hat es eine optionale jQuery plug-in haben. Wenn Sie nicht gegen die Verwendung von jQuery sind, schlage ich vor, dass Sie das jQuery-Plug-in verwenden, da jQuery das Leben viel einfacher macht.

Es gibt ein paar Möglichkeiten, diese Katze zu häuten. In beiden Fällen ist die Formel ungefähr gleich. Das heißt, lassen Sie Fine Uploader Dateien bearbeiten, erstellen Sie Eingabeelemente für jede übergebene Datei und geben Sie die Werte dieser Eingaben dann an Fine Uploader zurück, bevor Fine Uploader die zugehörige Datei an Ihren Server sendet.

Option # 1 - FineUploader-Modus (die vorgefertigte UI)

Mit FineUploader mode:

<div id="myFineUploaderContainer"></div> 
<button id="uploadSelectedFiles">Upload Selected Files</button> 

$('#myFineUploaderContainer').fineUploader({ 
    request: { 
     endpoint: '/my/upload/endpoint' 
    }, 
    autoUpload: false 
}) 
    .on('submitted', function(event, id, name) { 
     var fileItemContainer = $(this).fineUploader('getItemByFileId', id); 

     $(fileItemContainer) 
     .prepend('<input type="text" name="name">') 
     .append('<input type="text" name="description">'); 
    }) 
    .on('upload', function(event, id, name) { 
     var fileItemContainer = $(this).fineUploader('getItemByFileId', id), 
      enteredName = $(fileItemContainer).find('INPUT[name="name"]').val(), 
      enteredDescr = $(fileItemContainer).find('INPUT[namme="description"]').val(); 

     $(this).fineUploader('setParams', {name: enteredName, description: enteredDescr}, id); 
    }); 

$('#uploadSelectedFiles').click(function() { 
    $('#myFineUploaderContainer').fineUploader('uploadStoredFiles'); 
}); 

Sie werden wahrscheinlich zu dem obigen Code hinzufügen müssen an Ihren Bedürfnissen anzupassen, und CSS beitragen gegebenenfalls, aber das ist ein Anfang in die richtige Richtung. Oben warten Sie darauf, dass Fine Uploader Sie zurückrufen kann, wenn das Listenelement dem DOM hinzugefügt wurde, das eine ausgewählte Datei darstellt. Wenn Sie diesen Rückruf erhalten, fügen Sie am Anfang des Listenelements (für den vom Benutzer angegebenen Namen) ein Texteingabeelement und am Ende des Listenelements (für die vom Benutzer bereitgestellte Beschreibung) ein Texteingabeelement hinzu Fine Uploader sendet die Datei an Ihren Server, ruft den Event-Handler "upload" auf, in dem Sie die Werte der Eingabeelemente lesen und sie dem Fine Uploader übergeben und sie mit der Datei über die Datei-ID verknüpfen. Fine Uploader wird diese Informationen enthalten zusammen mit der Datei in der Multipart-codierten POST-Anfrage wird es an Ihren Server gesendet.

Der Click-Handler wird Fine Uploader signalisieren, die Dateien an Ihren Server zu senden.Ihr Benutzer wird dies klicken, nachdem sie alle Dateien ausgewählt und gefüllt haben Die Fine Uploader sendet Dateien normalerweise sofort an den Server, nachdem sie ausgewählt wurden, aber dies kann durch toggli geändert werden ng die autoUpload Option. Für Ihre Situation ist es am sinnvollsten, das automatische Hochladen auszuschalten.

Mit dem FineUploader-Modus müssen Sie sich nicht zu viele Gedanken um die Benutzeroberfläche machen, da die meisten davon für Sie erledigt wurden. Sie erhalten die Drag-Funktion & zusammen mit Fortschrittsbalken und anderen UI-Extras kostenlos.

Option # 2 - FineUploaderBasic Modus (bauen Sie Ihre eigene UI)

Ihre zweite Wahl ist FineUploaderBasic mode zu verwenden. Dies gibt Ihnen die meiste Kontrolle über Ihre Benutzeroberfläche, aber es erfordert die meiste Arbeit, da Sie Ihre eigene Benutzeroberfläche vollständig erstellen müssen. Das bedeutet, dass Sie die meisten callbacks verwenden müssen, um Ihre Benutzeroberfläche zu erstellen und sie mit dem internen Status von Fine Uploader und den zugehörigen Dateien synchron zu halten.

Wenn Sie beispielsweise Fortschrittsbalken möchten, müssen Sie sie selbst rendern und aktualisieren, basierend auf Informationen, die Sie regelmäßig über einen von Fine Uploader aufgerufenen Rückrufhandler onProgress erhalten. All dies ist gut und möglicherweise in einigen Fällen bevorzugt, wenn Sie mit Javascript, HTML und CSS recht vertraut sind. Wenn Sie es nicht sind, möchten Sie vielleicht versuchen, im FineUploader-Modus zu bleiben.

Der FineUploaderBasic-Modus enthält keine Drag & Drop-Unterstützung, aber Sie können problemlos Fine Uploader's standalone File Drag & Drop module integrieren, wenn Sie dies wünschen.