Jquery Form Dosya yüklendikten sonra gönderilmesi

Question

Bu varyasyonun birçok kez ortaya çıktığını fark ettim, ancak bu sorunun bu tür bir bağlamda hangi yanıtı bulabileceğimi bilmiyorum.

Dosya yükleme tamamlandığında jQuery kullanan ve başarı geri çağrısı veren bir üçüncü taraf dosya yükleyici kullanıyorum.

Elde etmek istediğim, 'Gönder'i tıklattığınızda, yükleme işlevini (ve dosyanın ilerleme çubuğuyla karşıya yüklenmeye başladığında) yüklenen dosya yükleyiciyle birlikte metin alanları içeren bir formdur. formu göndermeye devam etmeden önce başarı geri dönüşü.

Hemen jQuery ile tam bir aptalı olduğumu ve tamamen kafamı karıştırdığımı itiraf etmeliyim, bu yüzden bunu nasıl başaracağından emin değilim.

Şimdiye kadar yaptığım denemeler, yalnızca dosya yükleme işlemi devam ederken hemen gönderilmeye çalışılan formla sonuçlanıyor. "Şimdi yükle" düğmesini tıklattığınızda manualuploader.uploadStoredFiles(); işlevi çağrılır. aşağıdaki gibi dosya yükleyici başlatır

jQuery geçerli:

<form action="index.php" method="post" enctype="multipart/form-data" id="uploader"> 
<div id="manual-fine-uploader"></div> 
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;"> 
<input type="text" name="textbox" value="Test data"> 
<input name="test" type="button" value="Upload now"> 
</div> 
</form> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="fineuploader-3.6.3.js"></script> 
<script> 
$(document).ready(function() { 
var manualuploader = new qq.FineUploader({ 
     element: $('#manual-fine-uploader')[0], 
     request: { 
       endpoint: 'uploader.php' 
     }, 
     autoUpload: false, 
     text: { 
       uploadButton: '<i class="icon-plus icon-white"></i> Select Files' 
     } 
     }); 
     $('#triggerUpload').click(function() {  
     manualuploader.uploadStoredFiles(); 
     }); 
}); 

</script> 

Answer 1

jQuery kullanarak fark ettik. Neden the jQuery wrapper for Fine Uploader kullanıyorsunuz?

Yüklemeyi tamamladığında (başarılı veya başarısız), onComplete geri çağrısını dinlerim. onComplete işlendiğinde, tüm dosyaların başarıyla gönderildiğini kontrol etmek için mantığı içeren submitForm() yaptık.

Mantık göreceli olarak basittir: devam eden bir dosyamız yoksa ve qq.statusFAILED olan hiçbir dosya yoksa, formu göndermeye devam edebiliriz.

Ayrıca, yüklemelerin başarılı olmaması ve bu nedenle iptal edilmesi durumunda formun gönderileceğinden emin olmak için onCancel geri bildirimini dinliyorum.

Daha fazla geri arama var. callbacks numaralı telefondan ve API methods numaralı telefondan Fine Uploader dokümanlarını okumanızı tavsiye ederim. Dahası, Fine Uploader jQuery docs'a bakardım.

Eğer jQuery'yi anlamak probleminiz varsa, this'u yakınlarda bulundurmanızı öneririz.

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="fineuploader-3.6.3.js"></script> 

<form action="index.php" method="post" id="uploader"> 
<input type="text" name="textbox" value="Test data"> 
    <div id="manual-fine-uploader"></div> 
    <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;"> 
    </div> 
</form> 



$(document).ready(function() { 

    $("#triggerUpload").click(function() { 
     $("#manual-fine-uploader").fineUploader('uploadStoredFiles'); 
    }); 

    function submitForm() { 
     if ($(this).fineUploader('getInProgress') == 0) { 
      var failedUploads = $(this).fineUploader('getUploads', 
       { status: qq.status.UPLOAD_FAILED }); 
      if (failedUploads.length == 0) {  
       // do any other form processing here 
       $("#uploader").submit(); 
      } 
     } 
    }; 

    // Instantiate a Fine Uploader instance: 
    $("#manual-fine-uploader").fineUploader({ 
     autoUpload: false, 
     request: { 
      endpoint: "/uploads_bucket" 
     } 
    }).on("complete", function (event, id, name, response) { 
     submitForm.call(this); 
    }).on('statusChange', function (event, id, oldStatus, newStatus) { 
     if (newStatus === qq.status.CANCELED) { 
      submitForm.call(this); 
     } 
    }); 
}); 

Yardımcı olabileceğimiz başka sorularınız olursa lütfen bize bildirin.