रेल और AJAX फ़ाइल अपलोड - नल त्रुटि

Question

की संपत्ति 'आंतरिक HTML' नहीं पढ़ सकता है मैं गैलरी में गतिशील - AJAX - छवि अपलोड के लिए एक मॉड्यूल के साथ एक रेल ऐप विकसित कर रहा हूं। मैं इसे this app - multi-file-upload-demo पर आधारित कर रहा हूं। मैं जावास्क्रिप्ट और सामान में बहुत उत्सुक नहीं हूं, इसलिए मैं उस कार्यान्वयन से बहुत सारे तर्क की प्रतिलिपि बना रहा हूं।

Uncaught TypeError: Cannot read property 'innerHTML' of null 

क्रोम कंसोल, जो फ़ाइल

tmpl.js को संदर्भित करता है में

:

मैं, मैं सभी जवाहरात और जावास्क्रिप्ट लाइब्रेरियों को शामिल किया है, और मैं एक त्रुटि प्राप्त हरफनमौला प्रदर्शन से सभी तर्क निम्नलिखित मेरे ऐप बना

tmpl.load = function (id) { 
    return document.getElementById(id).innerHTML; 
}; 

जे एस का मेरा ज्ञान कोड की जो टुकड़ा है कि समारोह से चलाता है तो मैं आगे जा सकते हैं यह मेरे लिए स्पष्ट नहीं है।

क्या आप मुझे सलाह दे सकते हैं कि इस समस्या के स्रोत की जांच करने के लिए अगले चरण क्या हैं? मुझे उम्मीद है कि संभावित कारण विभिन्न हो सकते हैं, इसलिए मैं आवेदन से सभी कोड पेस्ट नहीं करना चाहता हूं।

Answer 1

त्रुटि संदेश हमें बताता है कि document.getElementById(id)null लौटा रहा है, इसलिए कोई तत्व निर्दिष्ट id.

डिबग करने के लिए के साथ दस्तावेज़ में वर्तमान में है, return बयान से पहले console.log(id); के लिए एक कॉल जोड़ने का प्रयास करें। एक बार ऐसा करने के बाद आप id का मान पा सकते हैं जो समस्या पैदा कर रहा है। उम्मीद है कि त्रुटि एक साधारण टाइपो का परिणाम है, याद रखें id का मान केस-संवेदी है। यदि कोई टाइपो समस्या नहीं है, तो आप कम से कम एक सशर्त ब्रेकपॉइंट सेट कर सकते हैं क्योंकि अब आप id के मान को जानते हैं जिसे आप तोड़ना चाहते हैं। ब्रेकपॉइंट को मारने के बाद, यह कॉलिंग फ़ंक्शंस के माध्यम से कदम उठाने का मामला है "यह देखने के लिए कि कोड का कौन सा टुकड़ा उस कार्य को ट्रिगर करता है।" उम्मीद है की यह मदद करेगा।

Answer 2

यह पुराना है लेकिन मुझे इसका वास्तविक समाधान मिला। //= require jquery-fileupload के बजाय application.js पर //=require jquery-fileupload/basic में अपनी आवश्यकताएं बदलें।

Answer 3

कारण आपको यह त्रुटि मिल रही है क्योंकि आप एक स्क्रिप्ट टैग आईडी = "टेम्पलेट-अपलोड" या आईडी = "टेम्पलेट-डाउनलोड" या दोनों खो रहे हैं।

पर डेमो से उदाहरण: http://blueimp.github.com/jQuery-File-Upload/

<script id="template-upload" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
    <tr class="template-upload fade"> 
     <td class="preview"><span class="fade"></span></td> 
     <td class="name"><span>{%=file.name%}</span></td> 
     <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> 
     {% if (file.error) { %} 
      <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td> 
     {% } else if (o.files.valid && !i) { %} 
      <td> 
       <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div> 
      </td> 
      <td class="start">{% if (!o.options.autoUpload) { %} 
       <button class="btn btn-primary"> 
        <i class="icon-upload icon-white"></i> 
        <span>Start</span> 
       </button> 
      {% } %}</td> 
     {% } else { %} 
      <td colspan="2"></td> 
     {% } %} 
     <td class="cancel">{% if (!i) { %} 
      <button class="btn btn-warning"> 
       <i class="icon-ban-circle icon-white"></i> 
       <span>Cancel</span> 
      </button> 
     {% } %}</td> 
    </tr> 
{% } %} 
</script> 
<!-- The template to display files available for download --> 
<script id="template-download" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
    <tr class="template-download fade"> 
     {% if (file.error) { %} 
      <td></td> 
      <td class="name"><span>{%=file.name%}</span></td> 
      <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> 
      <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td> 
     {% } else { %} 
      <td class="preview">{% if (file.thumbnail_url) { %} 
       <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a> 
      {% } %}</td> 
      <td class="name"> 
       <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a> 
      </td> 
      <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> 
      <td colspan="2"></td> 
     {% } %} 
     <td class="delete"> 
      <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}> 
       <i class="icon-trash icon-white"></i> 
       <span>Delete</span> 
      </button> 
      <input type="checkbox" name="delete" value="1"> 
     </td> 
    </tr> 
{% } %} 
</script> 

यूआई संस्करण इन दोनों टेम्पलेट्स मौजूद होने पर निर्भर करता है।

मुझे एक ही समस्या थी और जो गुम हो रहा था उसे चेकआउट करने का फैसला किया।

उम्मीद है कि मदद करता है।

Answer 4

मैं भी इसी समस्या में भाग गया। हालांकि, फ़ाइल अपलोड अपलोड प्लगइन का मूल संस्करण लोड करना मेरे लिए एक विकल्प नहीं था क्योंकि मैं एक अपलोड के लिए पूर्वावलोकन का उपयोग करता हूं, लेकिन दूसरे के लिए नहीं। आप null करने के लिए फ़ाइल से अपलोड प्लगइन के लिए uploadTemplateId और downloadTemplateId विकल्पों की स्थापना करके एक मामला-दर-मामला आधार पर "पूर्वावलोकन" कार्यक्षमता और template-upload और template-download के प्रसंस्करण का प्रयास निष्क्रिय कर सकते हैं।

Answer 5

मैं कुछ महीने के लिए इस प्लगइन का उपयोग कर रहा है, आज मैं देखा है कि फाइल अपलोड काम नहीं किया, और मैं एक त्रुटि

"cannot read property 'innerHTML' of null error". 

मैं इसे में देखा हो, और उसके क्योंकि एक सरल कारण। फ़ाइल पथ

http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js 

blueimp की Git में

http://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js 

को बदल दिया है। आप यहाँ देख सकते हैं के रूप में

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

पथ इस फ़ाइल में बदल दिया है।

https://github.com/blueimp/jQuery-File-Upload/blob/master/index.html 

मैं सही रास्ते और उसके कार्यों में बदल गया। उम्मीद है कि यह उत्तर यहां किसी की मदद करेगा जो एक ही समस्या है।