Gửi Biểu mẫu Jquery sau khi tải lên tệp

Question

Tôi nhận thấy biến thể câu hỏi này đã xuất hiện nhiều lần, nhưng không có gì tôi có thể tìm thấy câu trả lời cho câu hỏi này trong ngữ cảnh này.

Tôi đang sử dụng trình tải tệp lên của bên thứ ba, sử dụng jQuery và cung cấp một cuộc gọi lại thành công khi quá trình tải lên tệp hoàn tất.

Điều tôi muốn đạt được là biểu mẫu có trường văn bản, cùng với trình tải tệp, khi bạn nhấp vào 'Gửi', kích hoạt chức năng tải lên (và tệp bắt đầu tải lên với thanh tiến trình) và đợi gọi lại thành công trước khi tiếp tục gửi biểu mẫu.

Tôi phải thừa nhận ngay lập tức rằng tôi là một thằng ngốc hoàn toàn với jQuery và nó gây nhầm lẫn cho tôi hoàn toàn, vì vậy tôi rất không chắc chắn làm thế nào để đạt được điều này.

Các nỗ lực của tôi cho đến nay chỉ dẫn đến biểu mẫu cố gửi ngay lập tức trong khi đang tải tệp lên.

Chức năng manualuploader.uploadStoredFiles(); được khởi tạo khi nhấp vào nút 'Tải lên ngay bây giờ'.

Các jQuery mà instantiates các tập tin tải lên là như sau:

<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

tôi nhận thấy bạn đang sử dụng jQuery. Tại sao bạn không sử dụng the jQuery wrapper for Fine Uploader?

Tôi sẽ nghe cuộc gọi lại onComplete được kích hoạt sau khi tải lên hoàn tất (thành công hay không). Khi onComplete được kích hoạt, chúng tôi sẽ chuyển sang số submitForm() chứa logic để kiểm tra xem tất cả các tệp đã được gửi thành công chưa.

Logic tương đối đơn giản: nếu chúng tôi không có tệp nào đang diễn ra và không có tệp nào có qq.status trong số FAILED thì chúng tôi có thể tiến hành gửi biểu mẫu.

Ngoài ra, tôi nghe cuộc gọi lại onCancel để đảm bảo rằng biểu mẫu sẽ gửi nếu tải lên không thành công và do đó đã bị hủy.

Có nhiều cuộc gọi lại khác. Tôi khuyên bạn nên đọc trên các tài liệu Trình tải lên Tốt trên callbacks cũng như API methods. Hơn nữa, tôi sẽ xem xét Fine Uploader jQuery docs.

Nếu hiểu jQuery là vấn đề của bạn thì tôi khuyên bạn nên giữ this ở gần.

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

Hãy cho tôi biết nếu bạn có thêm bất kỳ câu hỏi nào mà tôi có thể hỗ trợ.