Rails和ajax文件上传 - 无法读取属性'innerHTML'的空错误

问题描述：

我正在开发一个带有动态模块的Rails应用程序 - ajax - 图片上传到图库。我正在基于this app - multi-file-upload-demo做到这一点。我对JavaScript和其他东西不太热衷，所以我从该实现中复制了许多逻辑。Rails和ajax文件上传 - 无法读取属性'innerHTML'的空错误

我提出了我的应用程序从下面的演示圆场所有的逻辑，我已经包括了所有的宝石和JavaScript库，我得到一个错误：

Uncaught TypeError: Cannot read property 'innerHTML' of null

铬控制台，它是指tmpl.js文件

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

我对JS的知识并没有让我清楚哪一段代码触发了这个函数，所以我可以走得更远。

您能否告诉我下一步调查此问题的根源是什么？我预计潜在的原因可能会有所不同，所以我不想粘贴应用程序中的所有代码。

答

错误消息告诉我们，document.getElementById(id)正在恢复null，所以没有元素当前与指定id.

调试的文件中，尝试return声明之前加入console.log(id);通话。一旦你这样做，你可以找到导致问题的价值id。希望错误是一个简单的错字的结果，请记住id的值是区分大小写的。如果错字不是问题，您至少可以设置一个条件断点，因为您现在知道要打破的值id。点击断点后，它只是通过调用函数来“查看哪些代码触发器可以正常工作”。希望这可以帮助。

这对我有用，因为我通过仔细查看我的脚本标记ID – thorne51 2014-07-13 23:53:09

答

这是旧的，但我找到了一个实际的解决方案。将application.js中的要求更改为//=require jquery-fileupload/basic而不是//= require jquery-fileupload。

谢谢你;），它帮助我 – jizak 2013-03-27 09:21:06

非常感谢@BlakeWilliams！这应该被标记为正确的响应，btw ... – 2016-02-02 15:48:01

它似乎比现在的作品，现在我必须检查fileupload的所有功能正在工作......我想知道需要jquery-fileupload/basic和jquery-fileupload ...以避免意外 – 2017-06-09 12:47:42

答

你得到这个错误的原因是你缺少一个脚本标签id =“template-upload”或id =“template-download”，或者两者都有。

从演示实施例在：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>

的UI版本取决于这两个模板存在。

我有同样的问题，并决定检查什么是失踪。

希望有所帮助。

答

我遇到了同样的问题。然而，加载基本版本的文件上传插件不是我的选择，因为我使用预览一个上传，而不是其他。您可以通过将文件上传插件的uploadTemplateId和downloadTemplateId选项设置为null，禁用“预览”功能以及尝试处理template-upload和template-download的具体情况。

为什么这是downvoted？ – 2014-02-27 16:49:46

谢谢，这是BTW最好的“固体”解决方案。 – 2014-04-01 15:06:26

为我工作，欢呼声 – JMK 2014-04-22 16:19:33

答

我使用这个插件了几个月，今天我注意到，文件上传不工作，我得到一个错误

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

我看着它，它因为一个简单的原因。文件路径

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

改为

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

在blueimp的饭桶。，你可以在这里看到

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

的路径在这个文件改变了。

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

我改变了正确的道路和它的作品。希望这个答案将有助于在这里有同样的问题的人。

Rails和ajax文件上传 - 无法读取属性'innerHTML'的空错误

相关推荐