我正在开发一个带有动态-ajax-图像上传到画廊的模块的Rails 应用程序。我正在根据这个应用程序 - multi-file-upload-demo进行操作。我对 Javascript 和其他东西不是很热衷，所以我从那个实现中复制了很多逻辑。
我按照rounders demo中的所有逻辑构建了我的应用程序，我包含了所有gem和javascript库，但出现错误：
Uncaught TypeError: Cannot read property 'innerHTML' of null
在 chrome 控制台中，它指的是 tmpl.js 文件
tmpl.load = function (id) {
return document.getElementById(id).innerHTML;
};
我对 JS 的了解并没有让我清楚哪段代码触发了该功能，因此我可以走得更远。
您能否告诉我调查此问题根源的下一步是什么？我预计潜在的原因可能是多种多样的，所以我不想粘贴应用程序中的所有代码。
这很旧，但我找到了一个实际的解决方案。将您的要求更改application.js为//=require jquery-fileupload/basic而不是//= require jquery-fileupload.
您收到此错误的原因是您缺少脚本标记 id="template-upload" 或 id="template-download" 或两者。
来自 Demo 的示例：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 版本取决于存在的这两个模板。
我遇到了同样的问题，并决定检查缺少的内容。
希望有帮助。
我也遇到了同样的问题。但是，加载文件上传插件的基本版本对我来说不是一个选项，因为我对一个上传使用预览，而不是另一个。您可以通过将文件上传插件的 和template-upload选项设置为.template-downloaduploadTemplateIddownloadTemplateIdnull
错误消息告诉我们document.getElementById(id)正在返回null，因此文档中当前没有指定的元素id.
要调试，请尝试console.log(id);在return语句之前添加调用。一旦你这样做了，你就会发现id导致问题的价值。希望错误是一个简单的拼写错误造成的，记住 的值id是区分大小写的。如果错字不是问题，您至少可以设置一个条件断点，因为您现在知道id要中断的值。到达断点后，只需单步执行调用函数以“查看哪段代码触发了该函数”。希望这可以帮助。
我用这个插件几个月了，今天我发现文件上传不起作用，我得到一个错误
"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 的 git 中。正如你在这里看到的
https://github.com/blueimp/jQuery-File-Upload
此文件中更改的路径。
https://github.com/blueimp/jQuery-File-Upload/blob/master/index.html
我改变了正确的道路及其作品。希望这个答案能帮助这里遇到同样问题的人。