narzędzie do precyzyjnego przesyłania - jak używać w połączeniu z innymi polami wprowadzania danych?

Question

Chciałbym użyć FineUploader w typowej postaci:

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

Więc chciałbym rzeczywiście lubią przede wszystkim wymienić <input name="fileupload" type="file" "> część.

Niestety nie znam JavaScript i jQuery jet i nie mam pojęcia, jak to zrobić. Nie mogłem znaleźć żadnego przykładowego kodu, w którym FineUploader jest używany wraz z innymi danymi do wysłania.

Byłbym wdzięczny za każdą pomoc!

Dzięki Kashuda

Answer 1

Choć dzieła Uploader nie wymaga jQuery (lub dowolną inną bibliotekę, dla tej sprawy) to ma opcjonalną jQuery plug-in. Jeśli nie jesteś przeciwny używaniu jQuery, sugeruję użycie wtyczki jQuery, ponieważ jQuery ułatwia życie.

Istnieje kilka sposobów na skórze tego kota. W obu przypadkach wzór jest mniej więcej taki sam. Oznacza to, że program Fine Uploader obsługuje pliki, tworzy elementy wejściowe "w locie" dla każdego przesłanego pliku, a następnie przekazuje wartości tych wejść z powrotem do programu Fine Uploader tuż przed wysłaniem przez program Fine Uploader skojarzonego pliku na serwer.

Option # 1 - tryb FineUploader (przy użyciu gotowych UI)

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

Najprawdopodobniej trzeba dodać do powyższego kodu do własnych potrzeb, a także przyczyniać CSS w razie potrzeby, ale jest to początek we właściwym kierunku. Powyżej czekamy, aż program Fine Uploader oddzwoni, gdy doda element listy do DOM reprezentującego wybrany plik. Po otrzymaniu tego wywołania zwrotnego dodajesz element wprowadzania tekstu na początku elementu listy (dla nazwy dostarczanej przez użytkownika), a drugi na końcu elementu listy (dla opisu dostarczonego przez użytkownika). Program Fine Uploader wysyła plik na serwer, wywołuje procedurę obsługi zdarzeń "przesyłanie", w której odczytuje wartości elementów wejściowych i przekazuje je do programu Fine Uploader, wiążąc je z plikiem za pomocą identyfikatora pliku. Program Fine Uploader będzie zawierał te informacje wraz z plikiem w zakodowanym wieloczęściowo żądaniu POST zostanie wysłany na Twój serwer:

Moduł obsługi kliknięcia zasygnalizuje opcję Fine Uploader, aby wysłać pliki na serwer. Użytkownik kliknie to po wybraniu wszystkich plików i wypełnieniu out odpowiednio do pól wejściowych Normalnie program Fine Uploader wysyła pliki na serwer natychmiast po ich wybraniu, ale można to zmienić za pomocą toggli ng opcji autoUpload. W przypadku Twojej sytuacji, najlepiej jest wyłączyć automatyczne wysyłanie.

Korzystanie z trybu FineUploader oznacza, że ​​nie musisz się zbytnio przejmować interfejsem użytkownika, ponieważ większość z nich została wykonana dla ciebie, a także możesz uzyskać dostęp do funkcji przeciągania, wraz z paskiem postępu i innymi dodatkami interfejsu użytkownika za darmo.

Wariant nr 2 - tryb FineUploaderBasic (zbudować własny UI)

Twój drugi wybór jest użycie FineUploaderBasic mode. Daje to największą kontrolę nad Twoim interfejsem użytkownika, ale wymaga największej pracy, ponieważ będziesz musiał stworzyć swój własny interfejs użytkownika. Oznacza to, że będziesz musiał korzystać z większości funkcji callbacks w celu skonstruowania interfejsu użytkownika i zachowania synchronizacji z wewnętrznym stanem programu Fine Uploader i powiązanymi plikami.

Na przykład, jeśli chcesz pasków postępu, będziesz potrzebować, aby uczynić je samodzielnie i aktualizować je w oparciu o informacje przekazywane okresowo do swoich pośrednictwem obsługi onProgress zwrotnej wywoływanego przez Sztuk Uploader. Wszystko to jest w porządku i prawdopodobnie preferowane w niektórych przypadkach, jeśli czujesz się komfortowo z javascript, HTML i CSS. Jeśli jednak nie jesteś, możesz spróbować trzymać się trybu FineUploader.

Tryb FineUploaderBasic nie obejmuje funkcji "przeciągnij i upuść" po wyjęciu z pudełka, ale w razie potrzeby można z łatwością zintegrować Fine Uploader's standalone File Drag & Drop module.