Upload von Rails und Ajax-Dateien - Eigenschaft 'innerHTML' von Null-Fehler kann nicht gelesen werden

Question

Ich entwickle eine Rails-App mit einem Modul für dynamische - Ajax - Bild-Upload in Galerie. Ich mache es basierend auf this app - multi-file-upload-demo. Ich bin nicht sehr scharf auf Javascript und so, also kopiere ich eine Menge Logik von dieser Implementierung.

machte ich meine App folgende aller Logik von Generalisten Demo, ich habe alle Edelsteine ​​und JavaScript-Bibliotheken enthalten, und ich erhalte eine Fehlermeldung:

Uncaught TypeError: Cannot read property 'innerHTML' of null 

in Chromkonsole, die Datei tmpl.js verweist

Meine Kenntnisse von JS machen mir nicht klar, welcher Codeabschnitt diese Funktion auslöst, damit ich weiter gehen kann.

Können Sie mir raten, was sind die nächsten Schritte, um die Ursache dieses Problems zu untersuchen? Ich vermute, dass die möglichen Gründe vielfältig sein können, deshalb möchte ich nicht den gesamten Code aus der Anwendung einfügen.

Answer 1

Die Fehlermeldung sagt uns, dass document.getElementById(id)null zurückkehren, so gibt es kein Element in dem Dokument mit den angegebenen id.

Zum Debuggen, versucht, einen Anruf zu console.log(id); vor der return Anweisung hinzufügen. Sobald Sie das tun, können Sie den Wert id finden, der das Problem verursacht. Hoffentlich ist der Fehler das Ergebnis eines einfachen Tippfehlers. Denken Sie daran, dass der Wert id die Groß-/Kleinschreibung betrifft. Wenn ein Tippfehler nicht das Problem ist, können Sie zumindest einen bedingten Haltepunkt setzen, da Sie jetzt den Wert von id kennen, den Sie unterbrechen möchten. Nach dem Erreichen des Breakpoints müssen Sie nur noch zu den aufrufenden Funktionen wechseln, um zu sehen, welcher Code die Funktion auslöst. Hoffe das hilft.

Answer 2

Das ist alt, aber ich habe eine echte Lösung gefunden. Ändern Sie Ihre Anforderung in application.js zu //=require jquery-fileupload/basic anstelle von //= require jquery-fileupload.

Answer 3

Der Grund, warum Sie diesen Fehler erhalten, ist, weil Sie ein Skript-Tag ID = "Vorlage-Upload" oder ID = "Vorlage-Download" oder beides fehlt.

Beispiel aus der Demo an: 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> 

Die UI-Version hängt sowohl von diesen Vorlagen vorhanden sind.

Ich hatte das gleiche Problem und beschloss, zu überprüfen, was fehlte.

Hoffe, dass hilft.

Answer 4

Ich lief in das gleiche Problem auch. Allerdings war das Laden der Basisversion des Datei-Upload-Plugins für mich keine Option, da ich die Vorschau für einen Upload verwende, für den anderen aber nicht. Sie können die Funktion "Vorschau" und die versuchte Verarbeitung von template-upload und template-download von Fall zu Fall deaktivieren, indem Sie die Optionen uploadTemplateId und downloadTemplateId für das Datei-Upload-Plugin auf null setzen.

Answer 5

ich dieses Plugin für ein paar Monate verwenden, bemerkte ich heute, dass Datei-Upload nicht funktioniert hat, und ich erhalte eine Fehlermeldung

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

ich in sie sah, und sein weil ein einfacher Grund. der Dateipfad

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

geändert

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

im git von blueimp. wie Sie hier

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

der Pfad in dieser Datei geändert sehen können.

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

Ich wechselte auf den richtigen Weg und es funktioniert. hoffe diese antwort wird hier jemandem helfen, der dasselbe problem bekommen hat.