fine-uploader - come usare in combinazione con altri campi di input?

Question

Vorrei utilizzare FineUploader all'interno di una tipica forma:

<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"> 

Così mi sarebbe effettivamente desidera sostituire principalmente la parte <input name="fileupload" type="file" ">.

Purtroppo non ho molta familiarità con JavaScript e jQuery Jet e non ho idea di come farlo. Non sono riuscito a trovare alcun codice esemplificativo in cui FineUploader sia utilizzato insieme ad altri dati da inviare.

Apprezzerei qualsiasi aiuto!

Grazie Kashuda

Answer 1

Mentre Belle Uploader non richiede jQuery (o qualsiasi altra libreria, se è per questo) si ha un optional jQuery plug-in. Se non ti opponi all'utilizzo di jQuery, ti suggerisco di utilizzare il plug-in jQuery, poiché jQuery rende la vita molto più semplice.

Ci sono un paio di modi per scuoiare questo gatto. In entrambi i casi, la formula è quasi la stessa. Cioè, lascia che Fine Uploader gestisca i file, crei elementi di input al volo per ogni file inviato e poi restituisca i valori di tali input a Fine Uploader appena prima che Fine Uploader invii il file associato al tuo server.

Opzione # 1 - Modalità FineUploader (utilizzando il pre-costruito UI)

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

È probabile che sia necessario aggiungere al codice di cui sopra in base alle proprie esigenze, e contribuire CSS se del caso, ma questo è un inizio nella giusta direzione. In alto, stai aspettando che Fine Uploader ti richiami quando ha aggiunto l'elemento della lista al DOM che rappresenta un file selezionato. Quando si riceve la richiamata, si aggiunge un elemento di immissione del testo all'inizio della voce dell'elenco (per il nome fornito dall'utente) e un altro alla fine della voce dell'elenco (per la descrizione fornita dall'utente, quindi poco prima Fine Uploader invia il file al tuo server, invoca il gestore di eventi "upload", dove leggi i valori degli elementi di input e li mandi a Fine Uploader, associandoli al file tramite l'ID del file. Fine Uploader includerà queste informazioni insieme al file nella richiesta POST con codifica multipart che invierà al tuo server

Il gestore di clic segnalerà a Fine Uploader di inviare i file al server. L'utente farà clic su questo dopo aver selezionato tutti i file e riempito i campi di input come appropriato. Normalmente, Fine Uploader invia i file al server immediatamente dopo la loro selezione, ma questo può essere modificato da toggli ng l'opzione autoUpload. Per la tua situazione, ha più senso disattivare il caricamento automatico.

Utilizzando la modalità FineUploader significa che non c'è bisogno di preoccuparsi troppo per l'interfaccia utente, come la maggior parte di esso è stato fatto per te, e si ottiene la funzionalità drag drop &, insieme con le barre di avanzamento e altre chicche UI gratuitamente.

Opzione # 2 - Modalità FineUploaderBasic (costruire la propria interfaccia utente)

tua seconda scelta è quella di utilizzare FineUploaderBasic mode. Questo ti dà il massimo controllo sulla tua interfaccia utente, ma richiede il maggior lavoro in quanto avrai bisogno di creare interamente la tua interfaccia utente. Ciò significa che è necessario utilizzare la maggior parte dello callbacks per costruire l'interfaccia utente e mantenerla sincronizzata con lo stato interno di Fine Uploader e i file associati.

Ad esempio, se si desiderano barre di avanzamento, è necessario eseguire il rendering da soli e aggiornarle in base alle informazioni trasmesse periodicamente tramite un gestore di richiamata onProgress richiamato da Fine Uploader. Tutto ciò va bene e probabilmente è preferibile in alcuni casi se sei abbastanza a tuo agio con javascript, HTML e CSS. Se non lo sei, tuttavia, potresti provare a utilizzare la modalità FineUploader.

FineUploader La modalità Base non include il supporto per il trascinamento della selezione, ma è possibile integrare facilmente Fine Uploader's standalone File Drag & Drop module se lo si desidera.