jQuery फ़ाइल अपलोड नहीं किया गया 'किया'

Question

मैं jQuery-File-Upload प्लगइन का उपयोग करता हूं। मैंने इसका परीक्षण करने के लिए एक सरल कोड लिखा - और यह काम करता है, लेकिन समस्याओं के बिना नहीं। यह done को ट्रिगर नहीं करता है, भले ही फ़ाइल अपलोड हो और प्रगति पट्टी इसके अंत तक पहुंच जाए।

$('#file_file').fileupload({ 
    dataType: 'json', 
    autoUpload: true, 
    add: function (e, data) { 
     data.context = $('<p/>').text('Uploading...').appendTo(document.body); 
     data.submit(); 
    }, 
    progressall: function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#progress .bar').css(
      'width', 
      progress + '%' 
     ); 
    }, 
    done: function (e, data) { 
     alert('Done'); 
    } 
}); 

मेरे इनपुट कि के रूप में सरल है:

कोड यह

<input type="file" id="file_file" name="file[file]" /> 

Answer 1

मैंने कुछ चीजों को बदल दिया और यह काम करता है। यहाँ:

$('#file_file').fileupload({ 
    autoUpload: true, 
    add: function (e, data) { 
     $('body').append('<p class="upl">Uploading...</p>') 
     data.submit(); 
    }, 
    progressall: function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#progress .bar').css(
      'width', 
      progress + '%' 
     ); 
    }, 
    done: function (e, data) { 
     $('.upl').remove(); 
     $.each(data.files, function (index, file) { 
      /**/ 
     }); 
    } 
}); 

Answer 2

$(input).fileupload(

     url  : '...' 

     ,dataType : 'json' 
     ,sequentialUploads : true 

     ,add  : function (e,data) { 


      $.each(data.files,function(i,file){ 

       file.jqXHR = data.submit() 
          .success(function (result, textStatus, jqXHR) {/* ... */}) 
          .error(function (jqXHR, textStatus, errorThrown) { 
          }) 
          .complete(function (result, textStatus, jqXHR) { 
           //...     
            }); 

       }); 
     } 


     ,done: function (e, data) { 
     console.log(data); 

     } 


    }); 

मेरे लिए पूरी तरह से काम करता है

;

मतभेद

• यूआरएल सेट कर दिया जाता हैं (मैं आशा है कि आप सिर्फ अपने स्निपेट में इसे यहाँ डाल करने के लिए भूल गया);

• तरह से मैं डाउनलोड कतार में फ़ाइल जोड़ने

• अनुक्रमिक अपलोड

संपादित करें (?):

jQuery फाइल अपलोड प्लगइन jQuery.ajax का उपयोग करता है() फ़ाइल अपलोड अनुरोधों के लिए। यह XHR के समर्थन के बिना ब्राउज़र के लिए भी सही है, इफ्रेम ट्रांसपोर्ट प्लगइन के लिए धन्यवाद।

फ़ाइल अपलोड प्लगइन के लिए सेट विकल्प jQuery.ajax() पर पास किए गए हैं और किसी भी AJAX सेटिंग्स या कॉलबैक को परिभाषित करने की अनुमति देते हैं। AJAX विकल्प प्रक्रिया डेटा, सामग्री टाइप और कैश फ़ाइल फ़ाइल पर अपलोड के लिए गलत पर सेट हैं और बदला नहीं जाना चाहिए।

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

अपने कोड आप हो सकता था में कहीं भी उन ajax सेटिंग बदल गई; किसी भी तरह यह कहता है कि यदि आपके पास $ .ajax का उपयोग करने के बाद से आपकी सेटिंग्स सही हैं, तो

Answer 3

मैं autoUpload के साथ मरम्मत: सच, ऐसा लगता है जब autoUpload गुण सेट नहीं है (अपलोड की उम्मीद के रूप में काम कर रहा है, भले ही) की तरह किया ईवेंट को ट्रिगर नहीं है।

Answer 4

अपने सर्वर JSON नहीं लौटा रहा है, तो निकालने का प्रयास करें:

fail: function(e, data) { 
    alert('Fail!'); 
} 

Answer 5

प्रयोग आज:

dataType: 'json' 

नहीं तो आप एक असफल घटना है, जिसके लिए परीक्षण करने के लिए आसान है के साथ समाप्त किया जा सकता है! यदि आप PHP का उपयोग कर रहे हैं, तो सुनिश्चित करें कि आपकी uploadhanler PHP फ़ाइल त्रुटि या चेतावनी प्रदर्शित नहीं करती है।यह एक खराब JSON आउटपुट बनाता है और जब आपकी फ़ाइल अपलोड की जाती है, तो प्लगइन पूर्ण ईवेंट के साथ एक सही JSON बफर नहीं भेज सकता है।

अपनी PHP फ़ाइल पर त्रुटि ट्रैकिंग के लिए, ऐसी स्क्रिप्ट पर प्रदर्शन त्रुटियों के बजाय लॉग फ़ाइल लिखना बेहतर है। आप उपयोग कर सकते हैं:

error_reporting(0) 

लेकिन न भूलें एक लॉग फ़ाइल में त्रुटि ट्रैकिंग जोड़ने का। बेशक ! मेरे लिए

$('#fileupload').bind('fileuploaddone', function (e, data) { 
    alert('Done'); 
}); 

यह सुनिश्चित करें कि काम करता है:

Answer 6

दस्तावेज़ में वर्णित this Callback Option की कोशिश करो।

Answer 7

मैं multer, multer-azure-storage, और blueimp-file-upload का उपयोग कर रहा हूं। सभी unpkg.com से परोसा जाता है। नीचे ट्रिगर के साथ एक एकाधिक फ़ाइल अपलोड है। 10/22/17 के रूप में काम कर रहा है।

js फ़ाइल:

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script> 
    <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/vendor/jquery.ui.widget.js"></script> 
    <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.iframe-transport.js"></script> 
    <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.fileupload.js"></script> 

पेज एचटीएमएल, एक्सप्रेस से कार्य किया:

 $('#fileupload').fileupload({ 
      url: 'https://domainwhatevs/my-listings/edit/[property id]/gallery', 
      paramName: '_file', 
      dataType: 'json', 
      type: 'POST', 
      autoUpload: true, 
      add: function (e, data) { 
       console.log('uploading:', data) 
       data.submit(); 
      }, 
      done: function (e, data) { 
       console.log('done triggered'); 
       console.log(data._response.result.result[0].originalname, 'uploaded at', data._response.result.result[0].url); 
       $.each(data.files, function (index, file) { 
       // console.log(file.name, 'uploaded.') 
       // console.log('done'); 
       // console.log(index); 
       // console.log(file); 
       }); 
       console.log(data); 
      } 
     }); 

// प्राप्त/मेरी-लिस्टिंग/संपादित करें/[संपत्ति id]/गैलरी

app.get(
    [ 
     '/my-listings/edit/:_id/gallery' 
    ], 
    (req, res) => { 
     console.log('image gallery:', req.params._id); 
     res.render('my-listings--edit--gallery', { 
      _id: req.params._id, 
      session: req.session 
     }); 
    } 
); 

// पोस्ट/मेरी लिस्टिंग/संपादन/[संपत्ति आईडी]/गैलरी

app.post(
    [ 
     '/my-listings/edit/:_id/gallery' 
    ], 
    upload.array('_file'), 
    (req, res, next) => { 
     console.log(req.files); 
     res.setHeader('Content-Type', 'application/json'); 
     res.send({result: req.files}); 
     next(); 
    } 
);