Представление формы JQuery после загрузки файла

Question

Я понимаю, что эта вариация вопроса появилась много раз, но я не могу найти ответы на этот вопрос в этом контексте.

Я использую сторонний файлообменник, который использует jQuery и дает успешный обратный вызов при завершении загрузки файла.

То, что я хочу достичь, это форма с текстовыми полями вместе с файловым загрузчиком, который, когда вы нажимаете «Отправить», запускает функцию загрузки (и файл начинает загружаться с помощью индикатора прогресса) и ждет обратный вызов успеха, прежде чем приступить к отправке формы.

Должен сразу признать, что я полный идиот с jQuery, и это меня смущает, поэтому я очень не уверен, как этого добиться.

Мои попытки до сих пор приводят только к тому, что в момент загрузки файла происходит немедленная отправка.

Функция «manualuploader.uploadStoredFiles();» создается при нажатии кнопки «Загрузить сейчас».

JQuery, который инициализирует файл загрузчик выглядит следующим образом:

<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. Почему бы вам не использовать the jQuery wrapper for Fine Uploader?

Я бы прослушивал обратный вызов onComplete, который запускается после завершения загрузки (успешно или нет). Когда onComplete уволен, мы делаем его submitForm(), который содержит логику проверки того, что все файлы были отправлены успешно.

Логика относительно проста: если у нас нет файлов в процессе и нет файлов, которые имеют qq.status из FAILED, тогда мы можем приступить к отправке формы.

Кроме того, я слушаю обратный вызов onCancel, чтобы убедиться, что форма будет отправлена, если загрузка не удалась и, таким образом, была отменена.

Есть еще много обратных вызовов. Я бы посоветовал ознакомиться с документами Fine Uploader на callbacks, а также API methods. Кроме того, я бы посмотрел на Fine Uploader jQuery docs.

Если понимание jQuery - это ваша проблема, я бы предложил оставить this.

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

Дайте мне знать, если у вас есть еще вопросы, которые я могу вам помочь.