2017-12-29 5 views
3

Ich versuche das jQuery-Datei-Upload-Plugin von blueim in meinem Projekt zu verwenden. Dies ist funktioniert perfekt in der Version Basic Plus, ich bin in der Lage Dateien auf dem Server zu laden, aber wenn ich versuche, Basic Plus UI (link) i immer Fehler bin zu verwenden:jQuery-Datei hochladen. Eigenschaft 'innerHTML' von null kann nicht gelesen werden

tmpl.min.js:1 Uncaught TypeError: Cannot read property 'innerHTML' of null 
    at Function.n.load (http://127.0.0.1:8000/static/cp/file_upload/tmpl.min.js:1:324) 
    at n (http://127.0.0.1:8000/static/cp/file_upload/tmpl.min.js:1:208) 
    at n (http://127.0.0.1:8000/static/cp/file_upload/tmpl.min.js:1:204) 
    at $.(anonymous function).(anonymous function)._initTemplates (http://127.0.0.1:8000/static/cp/file_upload/jquery.fileupload-ui.js:661:46) 
    at $.(anonymous function).(anonymous function)._initTemplates (http://127.0.0.1:8000/static/cp/file_upload/vendor/jquery.ui.widget.js:127:25) 
    at $.(anonymous function).(anonymous function)._initSpecialOptions (http://127.0.0.1:8000/static/cp/file_upload/jquery.fileupload-ui.js:681:18) 
    at $.(anonymous function).(anonymous function)._initSpecialOptions (http://127.0.0.1:8000/static/cp/file_upload/vendor/jquery.ui.widget.js:127:25) 
    at $.(anonymous function).(anonymous function)._create (http://127.0.0.1:8000/static/cp/file_upload/jquery.fileupload.js:1390:18) 
    at $.(anonymous function).(anonymous function)._create (http://127.0.0.1:8000/static/cp/file_upload/vendor/jquery.ui.widget.js:127:25) 
    at $.(anonymous function).(anonymous function)._super (http://127.0.0.1:8000/static/cp/file_upload/vendor/jquery.ui.widget.js:114:36) 

Hier ist die Reihenfolge der js Anforderungen in mein Projekt:

Eigentlich bekomme ich diese Fehlermeldung auch wenn ich Quellcode aus dem Beispiel kopieren/einfügen.

Edit:

hier HTML-Code:

<input id="fileupload" type="file" name="files[]" class="form-control" multiple> 
<div id="files" class="files"></div> 

Javascript (von blueimp Beispiel kopiert):

$(function() { 
    'use strict'; 

    // Initialize the jQuery File Upload widget: 
    $('#fileupload').fileupload({ 
     // Uncomment the following to send cross-domain cookies: 
     //xhrFields: {withCredentials: true}, 
     url: '{% url 'add_request' %}', 
    }); 

    // Enable iframe cross-domain access via redirect option: 
    $('#fileupload').fileupload(
     'option', 
     'redirect', 
     window.location.href.replace(
      /\/[^\/]*$/, 
      '/cors/result.html?%s' 
     ) 
    ); 

    if (window.location.hostname === 'blueimp.github.io') { 
     // Demo settings: 
     $('#fileupload').fileupload('option', { 
      url: '//jquery-file-upload.appspot.com/', 
      disableImageResize: /Android(?!.*Chrome)|Opera/ 
       .test(window.navigator.userAgent), 
      maxFileSize: 999000, 
      acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i 
     }); 
     // Upload server status check for browsers with CORS support: 
     if ($.support.cors) { 
      $.ajax({ 
       url: '//jquery-file-upload.appspot.com/', 
       type: 'HEAD' 
      }).fail(function() { 
       $('<div class="alert alert-danger"/>') 
        .text('Upload server currently unavailable - ' + 
          new Date()) 
        .appendTo('#fileupload'); 
      }); 
     } 
    } else { 
     // Load existing files: 
     $('#fileupload').addClass('fileupload-processing'); 
     $.ajax({ 
      // Uncomment the following to send cross-domain cookies: 
      //xhrFields: {withCredentials: true}, 
      url: $('#fileupload').fileupload('option', 'url'), 
      dataType: 'json', 
      context: $('#fileupload')[0] 
     }).always(function() { 
      $(this).removeClass('fileupload-processing'); 
     }).done(function (result) { 
      $(this).fileupload('option', 'done') 
       .call(this, $.Event('done'), {result: result}); 
     }); 
    } 

}); 
+0

Geben Sie den relevanten Code, den Sie verwenden, in Frage selbst ein –

+0

@ a-wolff Just edited my post – umaru

+0

@umaru Wo haben Sie 'innerHTML' verwendet? –

Antwort

1

gelöst. Problem war nicht in Javascript. Ich benutze Django-Tags in der Vorlage. Also musste ich JavaScript-Templates in {% verbatim%} django tag einfügen. Danke an alle.

Verwandte Themen