फ़ाइल अपलोड के बाद Jquery फॉर्म सबमिशन

Question

मुझे एहसास है कि प्रश्न की इस भिन्नता कई बार दिखाई दी है, लेकिन कोई भी नहीं जो मुझे इस तरह के संदर्भ में इस प्रश्न का उत्तर दे सकता है।

मैं किसी तृतीय पक्ष fileuploader, जो jQuery का इस्तेमाल करता है और जब फाइल अपलोड पूर्ण होने पर एक सफलता कॉलबैक देता उपयोग कर रहा हूँ।

जो मैं प्राप्त करना चाहता हूं वह फ़ाइल फ़ील्ड के साथ टेक्स्ट फ़ील्ड के साथ एक फॉर्म है, जब आप 'सबमिट' पर क्लिक करते हैं, अपलोड फ़ंक्शन को बंद कर देता है (और फ़ाइल इसके प्रगति पट्टी के साथ अपलोड करना शुरू कर देती है), और प्रतीक्षा करता है फॉर्म जमा करने से पहले सफलता कॉलबैक।

मैं तुरंत स्वीकार करने के लिए है कि मैं jQuery के साथ एक पूर्ण मूर्ख हूँ और यह मुझे पूरी तरह से भ्रमित, तो मैं बहुत अनिश्चित है कि यह कैसे प्राप्त करने के लिए कर रहा हूँ।

मेरे प्रयास अब तक केवल प्रपत्र तुरंत प्रस्तुत करने के लिए, जबकि फ़ाइल अपलोड चल रहा है प्रयास करने से होती है।

समारोह manualuploader.uploadStoredFiles(); जब 'अपलोड अब' बटन पर क्लिक instantiated है।

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.statusFAILED की कोई फ़ाइल नहीं है तो हम फॉर्म सबमिट करने के लिए आगे बढ़ सकते हैं।

इसके अलावा, मैं यह सुनिश्चित करने के लिए 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); 
     } 
    }); 
}); 

मुझे बताएं कि क्या आपके पास कोई और प्रश्न है जिसके साथ मैं सहायता कर सकता हूं।