javascript Rails 和 ajax 文件上传 - 无法读取 null 错误的属性“innerHTML”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11527693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rails and ajax file upload - cannot read property 'innerHTML' of null error
提问by Maciek Simm
I am developing a Rails app with a module for dynamic - ajax - image upload to gallery. I am doing it basing on this app - multi-file-upload-demo. I am not very keen in Javascript and stuff, so I copy a lot of logic from that implementation.
我正在开发一个 Rails 应用程序，其中包含一个用于将动态 - ajax - 图像上传到图库的模块。我是基于这个应用程序做的- multi-file-upload-demo。我对 Javascript 和其他东西不是很热衷，所以我从那个实现中复制了很多逻辑。
I made up my app following all logic from rounders demo, I have included all gems and javascript libraries, and I get an error:
我按照圆形演示中的所有逻辑编写了我的应用程序，我已经包含了所有 gems 和 javascript 库，但出现错误：
Uncaught TypeError: Cannot read property 'innerHTML' of null
in chrome console, which refers to tmpl.js file
在 chrome 控制台中，它指的是 tmpl.js 文件
tmpl.load = function (id) {
return document.getElementById(id).innerHTML;
};
My knowledge of JS doesn't make it clear to me which piece of code triggers that function so I can go further.
我对 JS 的了解并没有让我清楚哪一段代码触发了那个函数，所以我可以走得更远。
Can you advise me what are the next steps to investigate source of this problem? I expect potential reasons may be various, so I don't want to paste all code from the application.
你能告诉我下一步调查这个问题的根源是什么吗？我预计潜在原因可能多种多样，因此我不想粘贴应用程序中的所有代码。
回答by BlakeWilliams
This is old but I found an actual solution to this. Change your require in application.jsto //=require jquery-fileupload/basicinstead of //= require jquery-fileupload.
这是旧的，但我找到了一个实际的解决方案。将您的需求更改application.js为//=require jquery-fileupload/basic而不是//= require jquery-fileupload。
回答by Bill Billingson
The reason you're getting this error is because you are missing a script tag id="template-upload" or id="template-download" or both.
您收到此错误的原因是您缺少脚本标记 id="template-upload" 或 id="template-download" 或两者。
Example from the Demo at: http://blueimp.github.com/jQuery-File-Upload/
来自 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>
The UI version depends on both these templates being present.
UI 版本取决于是否存在这两个模板。
I was having the same problem and decided to checkout what was missing.
我遇到了同样的问题，并决定检查缺少的东西。
Hope that helps.
希望有帮助。
回答by Vivin Paliath
I ran into this same problem as well. However, loading the basic version of the file-upload plugin was not an option for me since I use previewing for one upload, but not for the other. You can disable the "preview" functionality and the attempted processing of template-uploadand template-downloadon a case-by-case basis by setting the uploadTemplateIdand downloadTemplateIdoptions for the file-upload plugin to null.
我也遇到了同样的问题。但是，加载文件上传插件的基本版本对我来说不是一种选择，因为我对一个上传使用了预览，而不是另一个。您可以禁用“预览”功能和未遂处理template-upload，并template-download通过设置在逐案基础uploadTemplateId和downloadTemplateId选项的文件上传插件null。
回答by gowansg
The error message tells us that document.getElementById(id)is returning null, so there is no element currently in the document with the specified id.
错误消息告诉我们document.getElementById(id)正在返回null，因此文档中当前没有具有指定元素的元素id.
To debug, try adding a call to console.log(id);before the returnstatement. Once you do that you can find the value of idthat is causing the problem. Hopefully the error is the result of a simple typo, remember the value of idis case-sensitive. If a typo is not the problem, you can at least set a conditional breakpoint since you now know the value of idthat you want to break on. After hitting the breakpoint, it's just a matter of stepping through to the calling functions to "see which piece of code triggers that function." Hope this helps.
要调试，请尝试console.log(id);在return语句之前添加一个调用。一旦你这样做了，你就可以找到id导致问题的价值。希望错误是一个简单的错字的结果，记住值id是区分大小写的。如果拼写错误不是问题，您至少可以设置一个条件断点，因为您现在知道id要中断的值。到达断点后，只需单步执行调用函数即可“查看哪段代码触发了该函数”。希望这可以帮助。
回答by BenB
I'm using this plugin for a few month, today i noticed that file upload didn't work, and i get an error
我使用这个插件几个月了，今天我发现文件上传不起作用，我收到一个错误
"cannot read property 'innerHTML' of null error".
I looked into it, and its because a simple reason. the file path
我调查了一下，原因很简单。文件路径
http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js
changed to
变成
http://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js
in the git of blueimp. as you could see here
在 blueimp 的 git 中。正如你在这里看到的
https://github.com/blueimp/jQuery-File-Upload
the path changed in this file.
此文件中的路径已更改。
https://github.com/blueimp/jQuery-File-Upload/blob/master/index.html
I changed to the right path and its works. hope this answer will help someone here that got same problem.
我改变了正确的路径和它的作品。希望这个答案能帮助这里遇到同样问题的人。
