ब्लूंप के अपलोड/डाउनलोड टेम्पलेट को कैसे अनुकूलित करें jQuery फ़ाइल अपलोड करें

Question

मैं jQuery File Upload डेमो का उपयोग करने की कोशिश कर रहा हूं। मैंने wiki & टेम्पलेट इंजन विकी के माध्यम से खोज की है लेकिन तालिका पंक्ति टैग का उपयोग किए बिना अपलोड/डाउनलोड टेम्पलेट को कस्टमाइज़ करने का उत्तर नहीं मिला। प्रत्येक बार जब मैं टेबल पंक्ति टैग को हटा/बदलता हूं तो यह काम नहीं करता है।

भाई मेरा अनुकूलित अपलोड टेम्पलेट है और यह काम नहीं करता है। मुझे नहीं पता क्यों, कृपया कोई मदद कर सकता है? http://jsbin.com/ivonow/1/

यह डेमो से कोड है:

uploadTemplate: function (o) { 
     var rows = $(); 
     $.each(o.files, function (index, file) { 
      var row = $('<li class="span3"><div class="thumbnail template-upload">' + 
       '<div class="preview"><span></span></div>' + 
       '<div class="caption"><h5 class="name"></h5>' + 
       '<p class="size"></p>' + 
       (file.error ? '<div class="error" colspan="2"></div>' : 
         '<div><div class="progress">' + 
          '<div class="bar" style="width:0%;"></div></div></div>' + 
          '<div class="start"><button>Start</button></div>' 
       ) + '<div class="cancel"><button>Cancel</button></div></div></div></li>'); 
      row.find('.name').text(file.name); 
      row.find('.size').text(o.formatFileSize(file.size)); 
      if (file.error) { 
       row.find('.error').text(
        locale.fileupload.errors[file.error] || file.error 
       ); 
      } 
      rows = rows.add(row); 
     }); 
     return rows; 
    }, 

Answer 1

उदाहरण और लाइव डेमो को देखकर से मैं इस jsbin बनाया। मैंने एचटीएमएल के निचले हिस्से में jQuery टेम्पलेट्स को बाहर निकाला और फ़ाइल अपलोड लोड ऑब्जेक्ट को सेट करते समय ऊपर से अपलोड किए गए विकल्प टेम्पलेट फ़ंक्शन को जोड़ा।

मैं भी uploadTemplateId और downloadTemplateId स्थापित करने के लिए तो शून्य पर यह चूक लोड करने का प्रयास नहीं होता था:

{ 
    uploadTemplateId: null, 
    downloadTemplateId: null, 
} 

एचटीएमएल में, मैं मेज उस पंक्ति टेम्पलेट्स चारों ओर से घेरे और एक जोड़ने के बाहर ले उल लेकिन स्टाइल अभी भी अजीब है।

उम्मीद है कि इससे मदद मिलती है।

Answer 2

खैर सब से पहले, जब आप एक तस्वीर है कि अपलोड किया गया है हटाने पर काम करना चाहते हैं, तो आप टेम्पलेट डाउनलोड और नहीं टेम्पलेट से अपलोड पर काम करना है।

टेम्पलेट-अपलोड का उपयोग यह देखने के लिए किया जाता है कि क्या अपलोड किया जा रहा है, और एक बार अपलोड होने पर, यह टेम्पलेट-डाउनलोड में वापस आता है।

इसलिए, आपके मामले में ओवरराइट होने वाला टेम्पलेट टेम्पलेट-डाउनलोड होना चाहिए। यहां यह कैसे करें: https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine पर एक अच्छा उदाहरण है।

नोट 1: नोड कि dynamicaly हटा दिया जाएगा CSS वर्ग टेम्पलेट डाउनलोड द्वारा लक्षित है। तो आपको उस कोड को अपने कोड के भीतर अलग-अलग स्थिति में रखने की कोशिश करनी चाहिए (मैंने divs का उपयोग किया और यह मेरे लिए काम करता है)। संक्रमण प्रभाव के लिए "फीका" वर्ग का उपयोग किया जाता है।

हालांकि, ऐसा लगता है वहाँ इस दस्तावेज़ (शायद मॉड्यूल है कि दस्तावेज़ में सूचित किया गया नहीं का एक उन्नत से) के भीतर कुछ त्रुटियाँ है कि।

पुनर्लेखन टेम्पलेट डाउनलोड के लिए निम्न कोड निकालने काम नहीं करेगा

row.find('.delete') 
    .attr('data-type', file.delete_type) 
    .attr('data-url', file.delete_url); 

क्योंकि डी फ़ाइल वस्तु किसी भी delete_type है और न ही मापदंडों delete_url लेकिन deleteType नहीं है और deleteUrl पैरामीटर। यह के लिए है Jquery फ़ाइल अपलोड संस्करण 8.9.0, tho '(पुराना संस्करण काम कर सकता है)।

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

सही कोड हटाएँ बटन काम करने के लिए जब टेम्पलेट डाउनलोड overwritting

row.find('.delete') 
    .attr('data-type', file.deleteType) 
    .attr('data-url', file.deleteUrl); 

मेरे लिए, निम्नलिखित कोड ठीक काम करता है।

$('#fileupload').fileupload({ 
    downloadTemplateId: '', 
    downloadTemplate: function (o) { 
     var rows = $(); 
     $.each(o.files, function (index, file) { 
      var row = $('<div class="template-download fade"><span class="preview"></span>' + 
       (file.error ? '<div class="error"></div>' : '') + 
       '<button class="delete">Delete</button></div>'); 
      //row.find('.size').text(o.formatFileSize(file.size)); 
      if (file.error) { 
       row.find('.name').text(file.name); 
       row.find('.error').text(file.error); 
      } else { 
       // row.find('.name').append($('<a></a>').text(file.name)); 
       if (file.thumbnailUrl) { 
        row.find('.preview').append(
         $('<a></a>').append(
          $('<img>').prop('src', file.thumbnailUrl) 
         ) 
        ); 
       } 
       row.find('a') 
        .attr('data-gallery', '') 
        .prop('href', file.url); 
       row.find('.delete') 
        .attr('data-type', file.deleteType) 
        .attr('data-url', file.deleteUrl); 
      } 
      rows = rows.add(row); 
     }); 
     return rows; 
    } 
});