jQueryファイルのアップロード。 nullのプロパティ 'innerHTML'を読み取ることができません

Question

私のプロジェクトでは、blueimpのjQuery File Uploadプラグインを使用しようとしています。これは、バージョンの基本的なプラスで完璧な作品ですが、私は、サーバー上のファイルをロードすることができていますが、私は基本的なプラスUIを使用しようとしていますとき（link）私はエラーになっています：

ここ

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) 

中のjs要件の順序です私のプロジェクト：

実際には、私はコピー/貼り付けのソースコードを例からこのエラーメッセージが表示されます。

編集：

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

ジャバスクリプト（blueimp例からコピー）：解決

$(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}); 
     }); 
    } 

}); 

Answer 1

ここ

は、HTMLコードです。問題はjavascriptではありませんでした。私はテンプレートでdjangoタグを使用します。だから私は{％verbatim％} djangoタグにJavaScript-Templatesタグを入れなければならなかった。 高齢者