ince yükleyici - diğer giriş alanları ile birlikte nasıl kullanılır?

Question

Ben tipik form içinde FineUploader kullanmak istiyorum:

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

Yani aslında esas <input name="fileupload" type="file" "> bölümünü değiştirmek istiyoruz.

Maalesef JavaScript ve jQuery jeti hakkında bilgi sahibi değilim ve bunun nasıl yapılacağı hakkında hiçbir fikrim yok. FineUploader'ın gönderilecek diğer verilerle birlikte kullanıldığı herhangi bir örnek kod bulamadım.

Herhangi bir yardım için minnettarım!

Teşekkür Kashuda

Answer 1

Güzel Yükleyici o isteğe bağlı jQuery plug-in var (ya da bu konuda herhangi bir başka kütüphane) jQuery gerektirmez iken. JQuery'yi kullanmaya karşı değilseniz, jQuery eklentisi olarak jQuery eklentisini kullanmanızı tavsiye ederim.

Bu kediyi derlemek için birkaç yol vardır. Her iki durumda da, formül yaklaşık aynıdır. Bu, Fine Uploader'ın dosyaları işleme koymasını, gönderilen her dosya için anında giriş öğeleri oluşturmasını ve Fine Uploader'ın ilişkili dosyayı sunucunuza göndermesinden hemen önce bu girdilerin değerlerini Fine Uploader'a geri iletmesini sağlar.

Seçenek # 1 - (önceden oluşturulmuş kullanıcı arayüzünü kullanarak) FineUploader modu

FineUploader mode kullanma:

Sen ihtiyaçlarınıza göre yukarıdaki koda ekleyin ve CSS katkıda gereken muhtemel olacak

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

Uygun olan yerlerde, ancak bu doğru yönde bir başlangıçtır. Yukarıda, Fine Yükleyicinin, liste öğesini seçilen bir dosyayı temsil eden DOM'a eklediğinde sizi geri çağırmasını bekliyorsunuz. Bu geri bildirimi aldığınızda, liste öğesinin başına (kullanıcı tarafından sağlanan ad için) ve liste öğesinin sonunda (kullanıcı tarafından sağlanan açıklama için) bir metin giriş öğesi ekliyorsunuz. Fine Uploader, dosyayı sunucunuza gönderir, giriş öğelerinin değerlerini okuduğunuz ve Fine Uploader'a dosya kimliği aracılığıyla dosyayla ilişkilendirdiğiniz "upload" olay işleyicinizi çağırır. Çok satır kodlu POST isteğindeki dosyayla birlikte sunucunuza gönderilir.

Tıklatma işleyicisi, Fine Uploader'ın dosyaları sunucunuza göndermesini bildirir. Kullanıcınız tüm dosyaları seçip tıkladıktan sonra bunu tıklar. Giriş alanlarını uygun şekilde düzenleyin: Normal Yükleyici, dosyaları seçildikten hemen sonra sunucuya gönderir, ancak bu toggli tarafından değiştirilebilir. autoUpload seçeneğini kullanın. Durumunuz için, otomatik yüklemeyi kapatmak en mantıklı.

kullanma FineUploader modu bunun çoğu sizin için yapıldığı gibi, kullanıcı arayüzünde hakkında çok fazla endişelenmenize gerek yok demektir ve ücretsiz ilerleme çubukları ve diğer UI hediyeler ile birlikte, sürükle & bırak fonksiyonunu olsun.

Seçenek # 2 - FineUploaderBasic mod (kendi UI inşa)

İkinci tercihiniz FineUploaderBasic mode kullanmaktır. Bu size UI'niz üzerinde en fazla kontrolü verir, ancak kendi UI'nizi tamamen oluşturmak için ihtiyaç duyacağınız en fazla işi gerektirir. Bu, UI'nuzu oluşturmak ve Fine Uploader'ın dahili durumuyla ve ilişkili dosyalarla senkronize durumda tutmak için çoğu callbacks'dan faydalanmanız gerektiği anlamına gelir.

Örneğin, ilerleme çubukları istiyorsanız, bunları kendiniz oluşturmanız ve Fine Uploader tarafından çağrılan bir onProgress geri arama işleyicisinden düzenli olarak geçirilen bilgilere dayanarak bunları güncelleştirmeniz gerekir. Javascript, HTML ve CSS ile oldukça rahat olursanız, tüm bunlar iyi ve muhtemelen bazı durumlarda tercih edilir. Bununla birlikte, eğer değilseniz, FineUploader modunu kullanmaya çalışın.

FineUploaderBasic modu, kutudan çıkarma ve bırakma desteğini içermez, ancak isterseniz Fine Uploader's standalone File Drag & Drop module kolayca tümleştirebilirsiniz.