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 요구 사항의 순서입니다 내 프로젝트 :

vendor/jquery.ui.widget.js 
JavaScript-Templates/js/tmpl.min.js 
JavaScript-Load-Image/js/load-image.all.min.js 
canvas-to-blob.min.js 
jquery.iframe-transport.js 
jquery.fileupload.js 
jquery.fileupload-process.js 
jquery.fileupload-image.js 
jquery.fileupload-validate.js 
jquery.fileupload-ui.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 코드입니다. 문제는 자바 스크립트에 없습니다. 템플릿에 django 태그를 사용합니다. 그래서 JavaScript-Templates 태그를 {% verbatim %} django 태그에 넣어야했습니다. 고맙습니다.