ब्लूंप की jQuery-फ़ाइल-अपलोड प्लगइन आग कॉलबैक क्यों नहीं है?

Question

मैं Blueimp's jQuery-File-Upload प्लगइन के साथ प्रयोग कर रहा हूं, जो demo द्वारा निर्णय लेना बहुत ही आशाजनक दिखता है।

यह लागू करने के लिए वास्तव में आसान है:

var $uploadButton = $("#fileop-upload");// <input type="file" id="fileop-upload" [etc] /> 
$uploadButton.fileupload({ 
    url : "//domain/path/to/receive-uploaded-files" 
}); 

चयनित फ़ाइलों के रूप में उम्मीद पृष्ठ को ताज़ा करने के बिना ठीक अपलोड किए जाते हैं, लेकिन इस तरह एक न्यूनतम विन्यास के साथ निश्चित रूप से उपयोगकर्ता को कोई भी सूचना नहीं मिलेगा। यहां है जहां प्लगइन के कॉलबैक काम में आएंगे।

दस्तावेज़ीकरण के अनुसार कॉलबैक को परिभाषित करने के दो तरीके हैं। उदाहरण के लिए add घटना (जो जब भी एक फ़ाइल अपलोड करने के लिए चयन किया जाता है आग) इस तरह मूल विन्यास वस्तु में जोड़ा जा सकता है:

$uploadButton.fileupload({ 
    add : addFileListener, 
    url : "//domain/path/to/receive-uploaded-files" 
}); 

या वैकल्पिक रूप से:

$uploadButton.bind("fileuploadadd", addFileListener); 

मुझे लगता है कि मिल गया है हालांकि केवल पहला दृष्टिकोण काम करता है, दूसरा कोई भी कुछ नहीं करता है।

यह और भी उत्सुक है कि कोई अन्य कॉलबैक - विशेष रूप से progress और start - बात नहीं फायरिंग किए जाने की कैसे मैं उन्हें बाँध लगता है:

$uploadButton.fileupload({ 
    add : addFileListener, 
    progress : progressListener, 
    start : startListener, 
    url : "//domain/path/to/receive-uploaded-files" 
}); 

या

$uploadButton.fileupload({ 
    add : addFileListener, 
    url : "//domain/path/to/receive-uploaded-files" 
}); 
$uploadButton.bind("fileuploadprogress", progressListener"); 
$uploadButton.bind("fileuploadstart", startListener"); 

मेरे पास है निर्दिष्ट श्रोता कार्यों को परिभाषित किया गया है, और कोड किसी भी त्रुटि या चेतावनियों की रिपोर्ट नहीं करता है।

.bind विधि की विफलता के लिए स्पष्टीकरण क्या है, और progress या start श्रोताओं को कभी सक्रिय क्यों नहीं किया जाता है?

Answer 1

मैं jQuery फ़ाइल अपलोड प्लगइन का लेखक हूं।

मुझे कोई स्पष्टीकरण नहीं है कि आपके तीसरे उदाहरण कोड में fileuploadadd ईवेंट क्यों नहीं आग लगती है। हालांकि, यदि आप ऐड कॉलबैक विकल्प को ओवरराइड करते हैं, तो आपको यह सुनिश्चित करना होगा कि फ़ाइल कॉल पर सबमिट विधि को कॉल करके फ़ाइल अपलोड शुरू किया गया है, जैसा कि कॉलबैक के लिए Options documentation में बताया गया है (और इसके स्रोत कोड में भी दस्तावेज किया गया है) लगाना)।

उदा। निम्नलिखित कोड अलग कॉलबैक घटनाओं प्रिंट आउट करना चाहिए:

$('#fileupload').fileupload({ 
    add: function (e, data) { 
     console.log('add'); 
     data.submit(); 
    }, 
    progress: function (e, data) { 
     console.log('progress'); 
    }, 
    start: function (e) { 
     console.log('start'); 
    } 
}).bind('fileuploadadd', function (e, data) { 
    console.log('fileuploadadd'); 
}).bind('fileuploadprogress', function (e, data) { 
    console.log('fileuploadprogress'); 
}).bind('fileuploadstart', function (e) { 
    console.log('fileuploadstart'); 
}); 

यह भी ध्यान रखें प्लगइन मॉड्यूलर है और यूआई संस्करण (डाउनलोड उदाहरण में प्रयुक्त) कॉलबैक विकल्प जो ऊपर कोड के साथ अधिरोहित किया जाएगा का उपयोग करता है कि । यही कारण है कि ईवेंट बाध्यकारी इतना उपयोगी है, क्योंकि यह विकल्प ऑब्जेक्ट के माध्यम से सेट कॉलबैक को ओवरराइड किए बिना अतिरिक्त कॉलबैक विधियों को परिभाषित करने की अनुमति देता है।

Answer 2

सुनिश्चित नहीं हैं कि यह आपकी समस्या का हल है या नहीं, लेकिन मेरे लिए, निम्नलिखित काम नहीं करता है (प्रलेखन प्रति काम करना चाहिए, यदि:

$uploadButton.bind 'fileuploadchange', (e, data) => 
    # Do something 

हालांकि, निम्नलिखित काम करता है:

$uploadButton.bind 'change', (e, data) => 
    # Do something 

Answer 3

यह मेरे लिए काम नहीं किया।

$('#fileupload').fileupload({url: '/url/to/server/'}); 

$('#fileupload').bind('fileuploaddone', function (e, data) { 
    console.log('success!!!'); 

    console.log(e); 

    console.log(data); 

}); 

लेकिन यह किया!

$('#fileupload').fileupload({url: '/url/to/server/'}).bind('fileuploaddone', function (e, data) { 
    console.log('success!!!'); 

    console.log(e); 

    console.log(data); 

}); 

मेरा पहला अनुमान यह है कि पहले मामले में आप फ़ाइल अपलोड लोड ऑब्जेक्ट के बजाय वास्तविक फॉर्म इनपुट को बाध्य कर रहे हैं, और दूसरे में, चेनिंग का उपयोग करके आप वास्तव में फ़ाइल अपलोड ऑब्जेक्ट का उपयोग कर रहे हैं, मुझे लगता है कि प्रलेखन के बाद से इसे पढ़ता अस्पष्ट है:,

$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */}); 

और यह

$('#fileupload').fileupload().bind('fileuploadadd', function (e, data) {/* ... */}); 

Answer 4

बजाय

पढ़ना चाहिए

$('#fileupload').bind('fileuploadadd', function (e, data) {/*...*/}); 

मैं इस्तेमाल किया,

$('#fileupload').bind('fileuploadchange', function (e, data) {/*...*/}); 

और यह मेरे लिए काम किया।

Answer 5

यदि ऐड इवेंट परिभाषित किया गया है, तो सभी प्रक्रिया कॉलबैक आग नहीं जाएंगी।

$(function(){ 
    var fileupload=$('#fileupload').fileupload({ 
     url: 'fileupload.php', 
     dataType: 'json', 
     add: function(e, data) { 
      data.submit(); 
     }, 
    }) 
    .on('fileuploadprocessalways', function (e, data) { 
     //Won't be triggered if add callback is defined 
    }) 
});