ファイルアップロード後の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コールバックを聞いています。これは、アップロードが完了すると（sucessfulかどうか）解雇されます。 onCompleteが解雇されると、すべてのファイルが正常に提出されたことを確認するロジックを含むsubmitForm()になります。

論理は比較的単純です。進行中のファイルがなく、qq.statusがFAILEDのファイルがない場合は、フォームを送信することができます。

また、onCancelコールバックを聞いて、アップロードが成功せずキャンセルされた場合にフォームが送信されることを確認します。

さらに多くのコールバックがあります。ファインアップローダーのドキュメントで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); 
     } 
    }); 
}); 

ご不明な点がございましたら、お気軽にお問い合わせください。