Tải lên tệp Rails và ajax - không thể đọc thuộc tính 'innerHTML' của lỗi null

Question

Tôi đang phát triển ứng dụng Rails với mô-đun cho động - ajax - tải hình ảnh lên thư viện. Tôi đang làm nó dựa trên this app - multi-file-upload-demo. Tôi không phải là rất quan tâm trong Javascript và các công cụ, vì vậy tôi sao chép rất nhiều logic từ việc thực hiện đó.

tôi tạo ứng dụng của tôi sau tất cả các logic từ rounders demo, tôi đã bao gồm tất cả các đá quý và các thư viện javascript, và tôi nhận được một lỗi:

Uncaught TypeError: Cannot read property 'innerHTML' of null 

trong chrome điều khiển, trong đó đề cập đến tmpl.js tập tin

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

Kiến thức về JS của tôi không cho tôi biết đoạn code nào kích hoạt chức năng để tôi có thể tiến xa hơn.

Bạn có thể tư vấn cho tôi các bước tiếp theo để điều tra nguồn của sự cố này không? Tôi hy vọng các lý do tiềm năng có thể khác nhau, vì vậy tôi không muốn dán tất cả mã từ ứng dụng.

Answer 1

Thông điệp lỗi cho chúng ta biết document.getElementById(id) đang trở lại null, vì vậy không có yếu tố hiện trong văn bản với các quy định id.

Để gỡ lỗi, hãy thử thêm một cuộc gọi đến console.log(id); trước khi tuyên bố return. Một khi bạn làm điều đó bạn có thể tìm thấy giá trị của id gây ra vấn đề. Hy vọng rằng lỗi là kết quả của một lỗi đánh máy đơn giản, hãy nhớ giá trị của id phân biệt chữ hoa chữ thường. Nếu lỗi đánh máy không phải là vấn đề, bạn có thể đặt ít nhất một điểm ngắt có điều kiện vì bây giờ bạn biết giá trị của id mà bạn muốn ngắt. Sau khi nhấn breakpoint, nó chỉ là một vấn đề của bước qua các chức năng gọi điện thoại để "xem đoạn mã kích hoạt chức năng đó." Hi vọng điêu nay co ich.

Answer 2

Đây là cũ nhưng tôi đã tìm thấy giải pháp thực tế cho điều này. Thay đổi yêu cầu của bạn trong application.js thành //=require jquery-fileupload/basic thay vì //= require jquery-fileupload.

Answer 3

Lý do bạn nhận được lỗi này là do bạn thiếu id thẻ tập lệnh = "tải lên mẫu" hoặc id = "tải xuống mẫu" hoặc cả hai.

Ví dụ từ Demo tại địa chỉ: http://blueimp.github.com/jQuery-File-Upload/ phiên bản

<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> 

Giao diện phụ thuộc vào cả những mẫu này có mặt.

Tôi đã gặp sự cố tương tự và quyết định kiểm tra những gì bị thiếu.

Hy vọng điều đó sẽ hữu ích.

Answer 4

Tôi cũng gặp vấn đề tương tự. Tuy nhiên, việc tải phiên bản cơ bản của plugin tải lên tệp không phải là một tùy chọn cho tôi vì tôi sử dụng tính năng xem trước cho một lần tải lên nhưng không phải cho phiên bản khác. Bạn có thể tắt chức năng "xem trước" và xử lý cố gắng template-upload và template-download trên cơ sở từng trường hợp bằng cách đặt các tùy chọn uploadTemplateId và downloadTemplateId cho plugin tải tệp lên null.

Answer 5

Tôi đang sử dụng plugin này cho một vài tháng, hôm nay tôi nhận thấy rằng tập tin tải lên không làm việc, và tôi nhận được một lỗi

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

Tôi nhìn vào nó, và vì một lý do đơn giản của nó. đường dẫn file

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

đổi thành

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

trong git của blueimp. như bạn có thể thấy ở đây

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

đường dẫn đã thay đổi trong tệp này.

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

Tôi đã thay đổi sang đúng đường và công trình của nó. hy vọng câu trả lời này sẽ giúp ai đó ở đây có cùng vấn đề.